{"_id":"@confusedfish/ngx-slider-v2","name":"@confusedfish/ngx-slider-v2","dist-tags":{"latest":"15.2.9"},"versions":{"15.2.9":{"name":"@confusedfish/ngx-slider-v2","version":"15.2.9","description":"Self-contained, mobile friendly slider component for Angular 14/15 based on angularjs-slider","keywords":["slider","ui","component","angular","ng","ngx"],"author":{"name":"Piotr Dziwinski"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/danisss9/ngx-slider.git"},"bugs":{"url":"https://github.com/danisss9/ngx-slider/issues"},"homepage":"https://github.com/danisss9/ngx-slider#readme","dependencies":{"detect-passive-events":"^2.0.3","rxjs":"^7.4.0","tslib":"^2.3.0"},"peerDependencies":{"@angular/core":"^15.2.9","@angular/common":"^15.2.9","@angular/forms":"^15.2.9"},"module":"fesm2015/confusedfish-ngx-slider-v2.mjs","es2020":"fesm2020/confusedfish-ngx-slider-v2.mjs","esm2020":"esm2020/confusedfish-ngx-slider-v2.mjs","fesm2020":"fesm2020/confusedfish-ngx-slider-v2.mjs","fesm2015":"fesm2015/confusedfish-ngx-slider-v2.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/confusedfish-ngx-slider-v2.mjs","es2020":"./fesm2020/confusedfish-ngx-slider-v2.mjs","es2015":"./fesm2015/confusedfish-ngx-slider-v2.mjs","node":"./fesm2015/confusedfish-ngx-slider-v2.mjs","default":"./fesm2020/confusedfish-ngx-slider-v2.mjs"}},"sideEffects":false,"gitHead":"e98a34fbbe6208b625c5706d65e3a8ae0328c619","_id":"@confusedfish/ngx-slider-v2@15.2.9","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-L/p/ZHfD6jmuVldxXEkqRH0KIBnADx91xtsCL1QivE4UGXl2iv/81lHha062cbtpkvuiWIAM5zY2VC8KmpMnfQ==","shasum":"3967f91702053d982b5e324f8fc3982fbf1351b1","tarball":"https://registry.npmjs.org/@confusedfish/ngx-slider-v2/-/ngx-slider-v2-15.2.9.tgz","fileCount":40,"unpackedSize":1258654,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB9/c5duE+0tbQzZVffJcGgQsB6aJtCUPdXtabzMv7NrAiEA0qWomPTIyvXaKgUU1nEB83A7O5A1oeaQejNU1Pg4wtg="}]},"_npmUser":{"name":"confusedfish","email":"ben@bmcintyre.co.uk"},"directories":{},"maintainers":[{"name":"confusedfish","email":"ben@bmcintyre.co.uk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-slider-v2_15.2.9_1683301744722_0.37566068722854884"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-05T15:49:04.654Z","15.2.9":"2023-05-05T15:49:04.973Z","modified":"2023-05-05T15:49:05.132Z"},"maintainers":[{"name":"confusedfish","email":"ben@bmcintyre.co.uk"}],"description":"Self-contained, mobile friendly slider component for Angular 14/15 based on angularjs-slider","homepage":"https://github.com/danisss9/ngx-slider#readme","keywords":["slider","ui","component","angular","ng","ngx"],"repository":{"type":"git","url":"git+https://github.com/danisss9/ngx-slider.git"},"author":{"name":"Piotr Dziwinski"},"bugs":{"url":"https://github.com/danisss9/ngx-slider/issues"},"license":"MIT","readme":"# ngx-slider-v2\n[![npm version](https://badge.fury.io/js/ngx-slider-v2.svg)](https://badge.fury.io/js/ngx-slider-v2)\n[![Travis CI Build](https://travis-ci.org/angular-slider/ngx-slider.svg?branch=master)](https://travis-ci.org/angular-slider/ngx-slider)\n\nWebsite: https://angular-slider.github.io/ngx-slider/\n\nSelf-contained, mobile friendly slider component for Angular 6+ based on [angularjs-slider](https://github.com/angular-slider/angularjs-slider).\n\n**NOTE:** This component used to be known as ng5-slider before the v2.0.0 release. Starting with v2.0.0, it has been re-branded as ngx-slider, targeting Angular 6+. If you have been using the previous version in your app, please follow the instructions in [UPGRADING.md](UPGRADING.md). If you are sticking with the old version, it will continue to be available in the v1.2.x release line under the old name of ng5-slider. If you are looking for documentation for the old version, it is available as [archived copy on Github](https://raw.githubusercontent.com/angular-slider/ngx-slider/master/archive/ng5-slider-v1.2.6-site-archive.zip).\n\n## Dependencies\n\n| ngx-slider-v2 | Angular     | RxJS        |\n| ------------- | ----------- | ----------- |\n| 14.0.4        | 14.x.       | rxjs 6.x    |\n| 15.0.4        | 15.x.       | rxjs 7.x    |\n\n## Demos\n\n * Single slider - [StackBlitz](https://stackblitz.com/edit/ngx-slider-simple-slider-example?file=src%2Fapp%2Fapp.component.ts)\n\n   ![simple slider image](https://raw.githubusercontent.com/angular-slider/ngx-slider/master/assets/simple-slider.png)\n\n * Range slider - [StackBlitz](https://stackblitz.com/edit/ngx-slider-range-slider-example?file=src%2Fapp%2Fapp.component.ts)\n\n   ![range slider image](https://raw.githubusercontent.com/angular-slider/ngx-slider/master/assets/range-slider.png)\n\n * Slider with ticks - [StackBlitz](https://stackblitz.com/edit/ngx-slider-ticks-example?file=src%2Fapp%2Fapp.component.ts)\n\n   ![ticks slider image](https://raw.githubusercontent.com/angular-slider/ngx-slider/master/assets/ticks-slider.png)\n\n * Customised slider - [StackBlitz](https://stackblitz.com/edit/ngx-slider-customised-range-slider-example?file=src%2Fapp%2Fapp.component.ts)\n\n   ![customised slider image](https://raw.githubusercontent.com/angular-slider/ngx-slider/master/assets/customised-slider.png)\n\n * Slider with custom style - [StackBlitz](https://stackblitz.com/edit/ngx-slider-styled-slider-example?file=src%2Fapp%2Fapp.component.ts)\n\n   ![styled slider image](https://raw.githubusercontent.com/angular-slider/ngx-slider/master/assets/styled-slider.png)\n\n * Vertical slider - [StackBlitz](https://stackblitz.com/edit/ngx-slider-vertical-slider-example?file=src%2Fapp%2Fapp.component.ts)\n\n   ![vertical slider image](https://raw.githubusercontent.com/angular-slider/ngx-slider/master/assets/vertical-slider.png)\n\n * [More examples on official website](https://angular-slider.github.io/ngx-slider/demos)\n\n## Installation\n\nTo add the slider to your Angular project:\n```\nnpm install --save ngx-slider-v2\n```\n\nOnce installed, add the slider to your `app.module.ts`:\n```typescript\nimport { NgxSliderModule } from 'ngx-slider-v2';\n\n...\n\n@NgModule({\n   ...\n   imports: [\n     ...\n     NgxSliderModule,\n    ...\n   ],\n   ...\n})\nexport class AppModule {}\n```\n\n## Sample usage\n\nNow you can use the slider component in your app components, for example in `app.component.ts`:\n```typescript\nimport { Options } from 'ngx-slider-v2';\n...\n\n@Component({...})\nexport class AppComponent {\n  value: number = 100;\n  options: Options = {\n    floor: 0,\n    ceil: 200\n  };\n}\n```\n\nAnd in template file `app.component.html`:\n```html\n<ngx-slider [(value)]=\"value\" [options]=\"options\"></ngx-slider>\n```\n\n## Documentation\nFull API documentation is available on [official website](https://angular-slider.github.io/ngx-slider/docs).\n\n## Styling\n\nAn overview of how to apply your own style to the slider is described in [STYLING.md](STYLING.md).\n\n## Animations\n\nAs of v1.2.0 the slider features CSS animations of slider movement. If you prefer the previous behaviour, without animations, you can set the flag `animate: false` in your slider options.\n\n## Keyboard Shortcuts\n\nIn addition to mouse/touch events, the slider can also be controlled through keyboard. The available shortcuts are:\n - right/up arrow - increase by single step,\n - left/down arrow - decrease by single step,\n - page up - increase by 10% of slider range,\n - page down - decrease by 10% of slider range,\n - home - move to minimum value,\n - end - move to maximum value.\n\n## Tooltips\n\nThe slider allows for customising how to implement tooltips. See [TOOLTIPS.md](TOOLTIPS.md) for more information.\n\n## Known Issues\n\nBefore reporting a new bug, please look at [KNOWN_ISSUES.md](KNOWN_ISSUES.md) for a list of known problems and their workarounds. New bugs reports for these problems will not be accepted.\n\n## Bugs\n\nYou can report any bugs as [Github issues](https://github.com/danisss9/ngx-slider-v2/issues).\n\nPlease describe the issue in detail pasting any relevant code, or preferrably a StackBlitz with reproduction of the problem by [forking and editing this sample StackBlitz](https://stackblitz.com/edit/ngx-slider-simple-slider-example?file=src/app/app.component.ts). Please also provide the version of NPM package you are using.\n\n## Changelog\n\nFor list of changes and bugfixes, see [CHANGELOG.md](CHANGELOG.md).\n\n## Developer information\n\nIf you would like to contribute to the project, see [DEVELOPERS.md](DEVELOPERS.md).\n\n## License\n\nThe project is licensed under the MIT license.\n","readmeFilename":"README.md"}