npm install js-rangeslider
Add HTML-Elements of class "rangeSlider" to your markup first:
<div class="rangeSlider" data-min="0" data-max="100" data-step="1" data-vmin="20" data-vmax="80"></div>
Import rangeSlider as needed:
import Styles from "js-rangeslider/src/js-rangeslider"
import RangeSlider from "js-rangeslider/src/js-rangeslider"
new RangeSlider(document.querySelector(".rangeSlider"))
If you want to override the default styling, use scss to override the default values before importing:
// custom-rangeslider-styles.scss
$barBackground: #dedede;
$handleBackground: #444444;
$progressBackground: #c00;
@import "js-rangeslider/src/js-rangeslider";
Initialize your rangeSlider using an Object with some or all of these options:
| Name | Type | Default | Description |
|---|---|---|---|
| min | Number | 0 | The absolute minimum of your rangeSlider |
| max | Number | 100 | The absolute maximum of your rangeSlider |
| minInputName | String | "min" | The name of the input holding the minimum-value, might be important when using server-side input-processing |
| maxInputName | String | "max" | The name of the input holding the maximum-value, might be important when using server-side input-processing |
| minInputValue | Number | 0 | The current minimum-value |
| maxInputValue | Number | 100 | The current maximum-value |
| step | Number | 1 | The value between each separate step of your range |
| outputFormatter | Function | output => `${output} €` | A function accepting the current output as a parameter and returning a formatted string to output |
| progress | Boolean | true | Wether or not a progress bar between each of the rangeSlider-handles will be rendered |
| output | Boolean | true | Wether or not two output-fields will be rendered on the bottom left and right ends of your rangeSlider |