https://github.com/m0t0r/ngx-slider
A customizable slider component for Angular >= 9 based on https://github.com/angular-slider/ng5-slider
https://github.com/m0t0r/ngx-slider
angular components slider ui
Last synced: about 1 year ago
JSON representation
A customizable slider component for Angular >= 9 based on https://github.com/angular-slider/ng5-slider
- Host: GitHub
- URL: https://github.com/m0t0r/ngx-slider
- Owner: m0t0r
- License: mit
- Created: 2020-03-07T17:00:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-08T00:06:46.000Z (almost 6 years ago)
- Last Synced: 2025-03-30T11:11:49.250Z (about 1 year ago)
- Topics: angular, components, slider, ui
- Language: TypeScript
- Homepage:
- Size: 570 KB
- Stars: 24
- Watchers: 2
- Forks: 4
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-slider
A customizable slider component for Angular >= 9 based on [ng5-slider](https://github.com/angular-slider/ng5-slider).
If you are looking for Angular support with version < 9, please use the original package: [ng5-slider](https://github.com/angular-slider/ng5-slider)
## Installation
To add the slider to your Angular project:
```
npm install --save @m0t0r/ngx-slider
```
Once installed, add the slider to your `app.module.ts`:
```typescript
import { NgxSliderModule } from '@m0t0r/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 '@m0t0r/ngx-slider';
...
@Component({...})
export class AppComponent {
value: number = 100;
options: Options = {
floor: 0,
ceil: 200
};
}
```
And in template file `app.component.html`:
```html
```
## Styling
An overview of how to apply your own style to the slider is described in [STYLING.md](STYLING.md).
## Animations
The current verion of 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.
## 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.
## Developer information
If you would like to contribute to the project, see [DEVELOPERS.md](DEVELOPERS.md).
## Disclaimer
Due to lack of support of the original package ([ng5-slider](https://github.com/angular-slider/ng5-slider)), it has been forked with the addition of Angular 9+ support. The intent of this package is to support newer versions of Angular (9+), if you are looking for support of Angular version < 9, please use [ng5-slider](https://github.com/angular-slider/ng5-slider).
## License
MIT license.