ngx-range-slider

Angular range slider based in input type range

Usage no npm install needed!

<script type="module">
  import ngxRangeSlider from 'https://cdn.skypack.dev/ngx-range-slider';
</script>

README

Angular Range Slider

A html5 range slider based on input[type="range"]

How to

Import RangeSliderModule in your angular app
simple range with steps example:

<range-slider [min]="10"
              [max]="90"
              [(minValue)]="minValue1"
              [(maxValue)]="maxValue1"
              [step]="10">
  <div>Selected: {{minValue1}}:{{maxValue1}}</div>
</range-slider>

range with list of value as ruler information example:

<range-slider name="range"
              [min]="20"
              [max]="77"
              [list]="[20,32,56,77]"
              [minValue]="30"
              [maxValue]="60"
              (rangeChange)="rangeChange($event)"></range-slider>
<div>Selected: {{minValue2}}:{{maxValue2}}</div>

For value changes use (rangeChange) output which will emit both min and max values.
For individual changes use (minValueChange) or (maxValueChange) or two-way data binding.

Installing:

npm install ngx-range-slider --save

App Requirements

none

Licensing

MIT License