react-range-slider-input

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

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

RefObject

RefObject resolves to:

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