[circleci-image]: https://circleci.com/gh/n3r4zzurr0/react-range-slider-input.svg?style=shield
[circleci-url]: https://circleci.com/gh/n3r4zzurr0/react-range-slider-input
[npm-image]: https://img.shields.io/npm/v/react-range-slider-input.svg
[npm-url]: https://npmjs.org/package/react-range-slider-input
[vulnerabilities-image]: https://snyk.io/test/npm/react-range-slider-input/badge.svg
[vulnerabilities-url]: https://snyk.io/test/npm/react-range-slider-input
[standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
[standard-url]: https://standardjs.com
[license-image]: https://img.shields.io/github/license/n3r4zzurr0/range-slider-input.svg
[license-url]: https://github.com/n3r4zzurr0/range-slider-input/blob/main/LICENSE

react-range-slider-input

[![circleci][circleci-image]][circleci-url] [![npm][npm-image]][npm-url] [![known vulnerabilities][vulnerabilities-image]][vulnerabilities-url] [![javascript style guide][standard-image]][standard-url] [![license][license-image]][license-url]

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](https://n3r4zzurr0.in/range-slider-input/)

Installation



npm install react-range-slider-input





Usage



v3.0.x and above (recommended)

js

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

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



export default function () {

    return (

        

    );

}



v2.1.x and below

js

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



export default function () {

    return (

        

    );

}





Props






























































































































    Property
    Type
    Default value
    Description


    ref
    RefObject
    null
    Provides access to the slider’s DOM elements (element, range, thumb.lower, thumb.upper).


    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.


    ariaLabel
    string[]
    -
    Array of two strings that set the aria-label attribute on the lower and upper thumbs respectively.


    ariaLabelledBy
    string[]
    -
    Array of two strings that set the aria-labelledby attribute on the lower and upper thumbs respectively.





$3

RefObject resolves to:

Property	Type	Default value	Description
`ref`	`RefObject`	null	Provides access to the slider’s DOM elements (`element`, `range`, `thumb.lower`, `thumb.upper`).
`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`.
`ariaLabel`	string[]	-	Array of two strings that set the `aria-label` attribute on the lower and upper thumbs respectively.
`ariaLabelledBy`	string[]	-	Array of two strings that set the `aria-labelledby` attribute on the lower and upper thumbs respectively.

ts

interface ReactRangeSliderInputRef {

  element: HTMLDivElement;

  range: HTMLDivElement;

  thumb: {

    lower: HTMLDivElement;

    upper: HTMLDivElement;

  };

}

Elements

Refer to range-slider-input's Elements section

Styling

Refer to range-slider-input's Styling section

License

MIT © Utkarsh Verma

react-range-slider-input

Installation



npm install react-range-slider-input





Usage



v3.0.x and above (recommended)

js

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

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



export default function () {

    return (

        

    );

}



v2.1.x and below

js

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



export default function () {

    return (

        

    );

}





Props






























































































































    Property
    Type
    Default value
    Description


    ref
    RefObject
    null
    Provides access to the slider’s DOM elements (element, range, thumb.lower, thumb.upper).


    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.


    ariaLabel
    string[]
    -
    Array of two strings that set the aria-label attribute on the lower and upper thumbs respectively.


    ariaLabelledBy
    string[]
    -
    Array of two strings that set the aria-labelledby attribute on the lower and upper thumbs respectively.





$3

RefObject resolves to:

Property	Type	Default value	Description
`ref`	`RefObject`	null	Provides access to the slider’s DOM elements (`element`, `range`, `thumb.lower`, `thumb.upper`).
`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`.
`ariaLabel`	string[]	-	Array of two strings that set the `aria-label` attribute on the lower and upper thumbs respectively.
`ariaLabelledBy`	string[]	-	Array of two strings that set the `aria-labelledby` attribute on the lower and upper thumbs respectively.

ts

interface ReactRangeSliderInputRef {

  element: HTMLDivElement;

  range: HTMLDivElement;

  thumb: {

    lower: HTMLDivElement;

    upper: HTMLDivElement;

  };

}