Range-slider-input NPM

range-slider-input

A lightweight (~2kB) library to create range sliders that can capture a value or a range of values with one or two drag handles.

Examples / CodePen

:sparkles: Features

High CSS customizability
Touch and keyboard accessible
Supports negative values
Vertical orientation
Small and fast
Zero dependencies
Supported by all major browsers
Has a React component wrapper

:warning: It is recommended that you upgrade from v1.x to v2.x! What's new and what's changed in v2.x?

Installation

npm

npm install range-slider-input

Import the rangeSlider constructor and the core CSS:

import rangeSlider from 'range-slider-input';
import 'range-slider-input/dist/style.css';

CDN

<script src="https://cdn.jsdelivr.net/npm/range-slider-input@2.4/dist/rangeslider.umd.min.js"></script>

<script src="https://unpkg.com/range-slider-input@2"></script>

The core CSS comes bundled with the jsDelivr and unpkg imports.

Usage

import rangeSlider from 'range-slider-input';
import 'range-slider-input/dist/style.css';

const rangeSliderElement = rangeSlider(element);

API

`rangeSlider(element, options = {})`

Returns an object of functions that can be called to read or write the properties initially set by options.

Parameters

`element`

HTMLElement

`options`

Object that specifies the characteristics of the range slider element with the following available properties:

Return value

Object of functions that can be called to read or write the properties initially set by the options parameter. Available functions:

`min()`, `max()`, `step()`, `value()` and `orientation()`

These are simple getter and setter functions. So, while calling these functions, if a parameter is supplied, the corresponding values will be set, and if a parameter is not supplied, the corresponding values will be returned. E.g. Calling step() will return the step value, and calling value([0, 0.5]) will set the lower and upper offsets to 0 and 0.5 respectively.

`disabled()`, `rangeSlideDisabled()`

The default parameter is set to true. So, if they are called without a parameter, they will set the corresponding values to true. Thus, calling disabled() or disabled(true) will set options.disabled = true and calling disabled(false) will set options.disabled = false.

`thumbsDisabled()`

The default parameter is set to [true, true]. So, if it is called without a parameter, it will disable both thumbs. Example uses:

//                          thumbs -> lower     upper
//                                    -----     -----
thumbsDisabled()                // disabled  disabled
thumbsDisabled(true)            // disabled  disabled
thumbsDisabled(false)           //  enabled   enabled
thumbsDisabled([])              //  enabled   enabled
thumbsDisabled([false])         //  enabled   enabled
thumbsDisabled([true])          // disabled   enabled
thumbsDisabled([true, false])   // disabled   enabled
thumbsDisabled([false, true])   //  enabled  disabled
thumbsDisabled([false, false])  //  enabled   enabled
thumbsDisabled([true, true])    // disabled  disabled

`currentValueIndex()`

Returns the index (0 for the lower value and 1 for the upper value) of the value which is currently being modified. Returns -1 when the slider is idle.

`removeGlobalEventListeners()`

Removes the global event listeners. It should be called when removing the range slider element from the DOM dynamically.

Elements

<div class="range-slider"><!-- range slider element -->
    <input type="range" /><!-- hidden -->
    <input type="range" /><!-- hidden -->
    <div class="range-slider__thumb" data-lower></div>
    <div class="range-slider__thumb" data-upper></div>
    <div class="range-slider__range"></div>
</div>

<div class="range-slider"></div> is the wrapper element that was used to instantiate the range slider initially and is added with a CSS class named range-slider.

<input type="range" /> elements are used to set values and are hidden.

<div class="range-slider__thumb"></div> elements are the slidable thumbs replacing the original thumbs from the <input type="range" /> elements.

<div class="range-slider__range"></div> element fills up the space between the thumbs.

Styling

View styled examples

element-selector {
    /* CSS for the wrapper element */
}
element-selector[data-disabled] {
    /* CSS for disabled range slider element */
}
element-selector .range-slider__range {
    /* CSS for range */
}
element-selector .range-slider__range[data-active] {
    /* CSS for active (actively being dragged) range */
}
element-selector .range-slider__thumb {
    /* CSS for thumbs */
}
element-selector .range-slider__thumb[data-lower] {
    /* CSS for lower thumb */
}
element-selector .range-slider__thumb[data-upper] {
    /* CSS for upper thumb */
}
element-selector .range-slider__thumb[data-active] {
    /* CSS for active (actively being dragged) thumbs */
}
element-selector .range-slider__thumb[data-disabled] {
    /* CSS for disabled thumbs */
}

Refer to the style.css file to know more about styling the range slider element and its children.