react range-slider range frontend javascript reactcomponent

@bilal111996/react-range-slider

❤ Awesome Range slider ❤

Installation

This module is distributed via [npm][npm] and should be installed as one of your project's dependencies:

npm install --save @bilal111996/react-range-slider

or

yarn add @bilal111996/react-range-slider

Usage

import RangeSlider from '@bilal111996/react-range-slider';

export default App = () => {
    return (
        <RangeSlider
            orientation="VERTICAL" // "HORIZONTAL | VERTICAL"               //defaults to HORIZONTAL
            markSpacing={20}         // Spacing value between tracks (in px)     *REQUIRED*
            trackColor="#212121"     // The slider's track color          //defaults to #212121
            thumbColor="whitesmoke"  // Background color for the thumb (movable part)   //defaults to whitesmoke
            thumbTextColor="#0277BD" // Color for the text in the thumb  //defaults to #0D47A1
            thumbSize={45}           // The size of the thumb(in px)     //defaults to 40
            sliderColor="whitesmoke" // Background color for the slider  //defaults to whitesmoke
            range={[1, 20]}           // The sliders range [lower, upper]  *REQUIRED*
            visibleCount={9}         // The number of elements to be visible by default  *REQUIRED*
            defaultStart={1}         // default value to start rangeSlider
            onChange={(selectedValue) => {  // Callback to received new value when slider value changes
                console.log("SELECTED VALUE ", selectedValue)
            }}
        />
    )
}