Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/angular-slider/ngx-slider
Self-contained, mobile friendly slider component for Angular based on angularjs-slider
https://github.com/angular-slider/ngx-slider
angular component slider ui
Last synced: 10 days ago
JSON representation
Self-contained, mobile friendly slider component for Angular based on angularjs-slider
- Host: GitHub
- URL: https://github.com/angular-slider/ngx-slider
- Owner: angular-slider
- License: mit
- Created: 2018-04-26T11:09:10.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-02T17:10:41.000Z (about 2 months ago)
- Last Synced: 2024-06-12T08:22:36.527Z (16 days ago)
- Topics: angular, component, slider, ui
- Language: TypeScript
- Homepage: https://angular-slider.github.io/ngx-slider/
- Size: 6.78 MB
- Stars: 374
- Watchers: 9
- Forks: 172
- Open Issues: 88
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-stars - angular-slider/ngx-slider - Self-contained, mobile friendly slider component for Angular based on angularjs-slider (TypeScript)
- awesome-angular - ngx-slider - Self-contained, mobile friendly slider component for Angular based on angularjs-slider. (Table of contents / Third Party Components)
README
# ngx-slider
[](https://badge.fury.io/js/%40angular-slider%2Fngx-slider)
Website: https://angular-slider.github.io/ngx-slider/
Discord: https://discord.gg/DHsDghZRwZ
Self-contained, mobile friendly slider component for Angular based on [angularjs-slider](https://github.com/angular-slider/angularjs-slider).
**NOTE:** The future of this project depends on willing volunteers. If you are able to help, please get in touch with the maintainers of this project on [dedicated Discord server](https://discord.gg/C6K9S9r7).
## Dependencies
| ngx-slider | Angular | RxJS | Actively supported |
| ------------- | ----------- | ----------- | ------------------ |
| 14.x | 14.x | 6.x | No |
| 15.x | 15.x | 7.x | Yes |
| 16.x | 16.x | 7.x | Yes |
| 17.x | 17.x | 7.x | Yes |
*Note:* Like with Angular only the latest 3 versions are actively supported.
## Demos
* Single slider - [StackBlitz](https://stackblitz.com/edit/ngx-slider-simple-slider-example?file=src%2Fapp%2Fapp.component.ts)
* Range slider - [StackBlitz](https://stackblitz.com/edit/ngx-slider-range-slider-example?file=src%2Fapp%2Fapp.component.ts)
* Slider with ticks - [StackBlitz](https://stackblitz.com/edit/ngx-slider-ticks-example?file=src%2Fapp%2Fapp.component.ts)
* Customised slider - [StackBlitz](https://stackblitz.com/edit/ngx-slider-customised-range-slider-example?file=src%2Fapp%2Fapp.component.ts)
* Slider with custom style - [StackBlitz](https://stackblitz.com/edit/ngx-slider-styled-slider-example?file=src%2Fapp%2Fapp.component.ts)
* Vertical slider - [StackBlitz](https://stackblitz.com/edit/ngx-slider-vertical-slider-example?file=src%2Fapp%2Fapp.component.ts)
* [More examples on official website](https://angular-slider.github.io/ngx-slider/demos)
## Installation
To add the slider to your Angular project:
```
npm install --save @angular-slider/ngx-slider
```
Once installed, add the slider to your `app.module.ts`:
```typescript
import { NgxSliderModule } from '@angular-slider/ngx-slider';
...
@NgModule({
...
imports: [
...
NgxSliderModule,
...
],
...
})
export class AppModule {}
```
## Sample usage
Now you can use the slider component in your app components, for example in `app.component.ts`:
```typescript
import { Options } from '@angular-slider/ngx-slider';
...
@Component({...})
export class AppComponent {
value: number = 100;
options: Options = {
floor: 0,
ceil: 200
};
}
```
And in template file `app.component.html`:
```html
```
## Documentation
Full API documentation is available on [official website](https://angular-slider.github.io/ngx-slider/docs).
## Styling
An overview of how to apply your own style to the slider is described in [STYLING.md](STYLING.md).
## Animations
As 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.
## Keyboard Shortcuts
In addition to mouse/touch events, the slider can also be controlled through keyboard. The available shortcuts are:
- right/up arrow - increase by single step,
- left/down arrow - decrease by single step,
- page up - increase by 10% of slider range,
- page down - decrease by 10% of slider range,
- home - move to minimum value,
- end - move to maximum value.
## Tooltips
The slider allows for customising how to implement tooltips. See [TOOLTIPS.md](TOOLTIPS.md) for more information.
## Known Issues
Before 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.
## Bugs
You can report any bugs as [Github issues](https://github.com/angular-slider/ngx-slider/issues).
Please 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.
## Changelog
For list of changes and bugfixes, see [CHANGELOG.md](CHANGELOG.md).
## Developer information
If you would like to contribute to the project, see [DEVELOPERS.md](DEVELOPERS.md).
## License
The project is licensed under the MIT license.
## Upgrading
For instructions on upgrading from previous (1.x) versions of the library, see [UPGRADING.md](UPGRADING.md).