RangeSlider

Installation

npm install js-rangeslider

Usage

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";

Options

Initialize your rangeSlider using an Object with some or all of these options: