https://github.com/jkuri/ngx-slider
Angular customizable range slider
https://github.com/jkuri/ngx-slider
angular angular2 ng range range-slider slider ui
Last synced: about 2 months ago
JSON representation
Angular customizable range slider
- Host: GitHub
- URL: https://github.com/jkuri/ngx-slider
- Owner: jkuri
- License: mit
- Created: 2020-06-23T22:58:16.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T09:43:10.000Z (over 3 years ago)
- Last Synced: 2025-11-11T18:33:38.871Z (7 months ago)
- Topics: angular, angular2, ng, range, range-slider, slider, ui
- Language: TypeScript
- Homepage: https://codesandbox.io/s/jkuringx-slider-demo-d0k6h
- Size: 4.51 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NgxRangeslider
Angular Range Slider as seen on Discord.
[Demo](https://codesandbox.io/s/jkuringx-slider-demo-d0k6h?file=/src/app/app.component.ts)
## Installation
Using Angular CLI:
```sh
ng add @jkuri/ngx-slider
```
or
```sh
npm install @jkuri/ngx-slider
```
Then in your module:
```ts
import { NgxSliderModule } from '@jkuri/ngx-slider';
@NgModule({
imports: [NgxSliderModule]
})
```
In your template:
```html
```
And in your component (example):
```ts
import { SliderValue, SliderOptions } from '@jkuri/ngx-slider';
fontSize = 14;
fontSizeValues: SliderValue[] = [
{ value: 8, placeholder: '8px' },
{ value: 12, placeholder: '12px' },
{ value: 14, placeholder: '14px' },
{ value: 15, placeholder: '15px' },
{ value: 16, placeholder: '16px' },
{ value: 18, placeholder: '18px' },
{ value: 20, placeholder: '20px' },
{ value: 24, placeholder: '24px' }
];
darkOptions: SliderOptions = {
gridColor: '#4F545C',
dashColor: '#4F545C',
dashMarkColor: '#4F545C',
dashMarkSelectedColor: '#68d391',
dashMarkFontWeight: 900,
dashMarkFontSize: 12,
dashMarkPadding: 12,
barColor: '#ffffff'
};
```
## License
MIT