js-rangeslider

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:

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