react range slider input

React component wrapper for range-slider-input

n3r4zzurr0
48
10
JavaScript

react-range-slider-input

circleci npm known vulnerabilities javascript style guide license

React component wrapper for 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).

CodeSanbox Demo

Demo


Installation

npm install react-range-slider-input

Usage

v3.0.x and above (recommended)

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

export default function () {
    return (
        <RangeSlider />
    );
}

v2.1.x and below

import RangeSlider from 'react-range-slider-input';

export default function () {
    return (
        <RangeSlider />
    );
}

Props

Property Type Default value Description
id string null Identifier string (id attribute value) to be passed to the range slider element.
className string null String of classes to be passed to the range slider element.
min number 0 Number that specifies the lowest value in the range of permitted values.
Its value must be less than that of max.
max number 100 Number that specifies the greatest value in the range of permitted values.
Its value must be greater than that of min.
step number / string 1 Number that specifies the amount by which the slider value(s) will change upon user interaction.
Other than numbers, the value of step can be a string value of any.

From MDN,
A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).
defaultValue number[] [25, 75] Array of two numbers that specify the default values of the lower and upper offsets of the range slider element respectively. If set, the range slider will be rendered as an uncontrolled element. To render it as a controlled element, set the value property.
value number[] [] Array of two numbers that specify the values of the lower and upper offsets of the range slider element respectively. If set, the range slider will be rendered as a controlled element.
onInput function NOOP Function to be called when there is a change in the value(s) of range sliders upon user interaction.
onThumbDragStart function NOOP Function to be called when the pointerdown event is triggered for any of the thumbs.
onThumbDragEnd function NOOP Function to be called when the pointerup event is triggered for any of the thumbs.
onRangeDragStart function NOOP Function to be called when the pointerdown event is triggered for the range.
onRangeDragEnd function NOOP Function to be called when the pointerup event is triggered for the range.
disabled boolean false Boolean that specifies if the range slider element is disabled or not.
rangeSlideDisabled boolean false Boolean that specifies if the range is slidable or not.
thumbsDisabled boolean[] [false, false] Array of two Booleans which specify if the lower and upper thumbs are disabled or not, respectively. If only one Boolean value is passed instead of an array, the value will apply to both thumbs.
orientation string horizontal String that specifies the axis along which the user interaction is to be registered. By default, the range slider element registers the user interaction along the X-axis. It takes two different values: horizontal and vertical.

Elements

Refer to range-slider-input’s Elements section

Styling

Refer to range-slider-input’s Styling section

License

MIT © Utkarsh Verma