A highly optimized and fully customizable pure angular component for value range selection.
npm install rm-ng-range-slider
Advanced, customizable, Optimized ,Minimal, light-weight and fully customizable pure angular component for value range selection.
Dual Value Range Selection


___
bash
npm: npm install rm-ng-range-slider --save
yarn: yarn add rm-ng-range-slider
`
Live DEMO
See the implementation here
Usage
Dual Range Slider uses angular hooks, so this component doesn't work with angular below below version 2.
In your component where you want to use the Device Service
`typescript
import {RmNgRangeSliderComponent} from "rm-ng-range-slider";
@Component({
selector: 'app-root',
imports: [RmNgRangeSliderComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
handleRangeChanged(event: { low: number, high: number }) {
console.log('Range changed:', event);
}
}
`
`html
[min]="0"
[max]="100"
[leftColor]="'#3498db'"
[rightColor]="'#e74c3c'"
[leftTooltipColor]="'#333'"
[rightTooltipColor]="'#e74c3c'"
(rangeChanged)="handleRangeChanged($event)"
>
`
$3
| Slider | Ng |
|--------|------|
| 1.0.0 | 18.x |
| 2.0.0 | 19.x |
$3
| Name | Description | Type | Default Value |
|---------------------|---------------------------------------|--------|:-------------------------------------------------------:|
| min | Minimum value of slider | number | Initially min value will be set 0 if not provided |
| max | Maximum value of slider | number | Initially max value will be set 100 if not provided |
| leftTooltipColor | set color for left tooltip | string | Initially set default color for tool tip is #333 |
| rightTooltipColor | set color for right tooltip | string | Initially set default color for tool tip is #e74c3c |
| leftColor | Set color for left side slider line | string | Initially set default color for tool is #3498db |
| rightColor | Set color for right side slider line | string | Initially set default color for tool is #e74c3c |
| rangeChanged` | Emit both value object of min and max | object | It do not return any value until changes |