Package Exports

two-thumb-range-slider
two-thumb-range-slider/dist/cjs/index.js
two-thumb-range-slider/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (two-thumb-range-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Two Thumb Range Slider

A fully customizable multi-range slider component by Om Prashant Londhe.

Context

😢 I spent 3 hours searching for a package that could provide two thumb range sliders with customisation but did not find anything similar to what I wanted. 🧑‍💻 After that, I went ahead and created my own in 2 hours. 😇 I am trying to provide this package to everyone so that you can customize it and use it according to your needs.

Demo

https://github.com/omlondhe/two-thumb-range-slider/assets/61611599/aaee273e-8507-4ce8-901c-0cd946ebe13d

How to install?

npm i two-thumb-range-slider

How to use?

Usage in React powered application 👇:

export const MultiRangeSliderBasicUsage = () => {
    const [value, setValue] = useState([1, 100]);
    return <MultiRangeSlider min={1} max={1000} value={value} onChange={setValue} />
}

Just do this and you are ready to rock! 🥳

Required props

min: number
max: number
value: number[]
onChange: Dispatch<SetStateAction<number[]>>

Customisations

height?: number;: Defines the height of the slider container
sliderInactiveBackgroundColor?: string;: Background colour of inactive portion of the slider.
sliderActiveBackgroundColor?: string;: Background colour of the active portion of the slider.
sliderHeight?: number;: Defines the height of the slider.
sliderInactiveRadius?: number;: Radius for the inactive portion of the slider.
sliderActiveRadius?: number;: Radius for the active portion of the slider.
thumbColor?: string;: Thumb colour of the slider.
thumbRadius?: number;: Thumb radius for the slider.
thumbBorder?: string;: Border of thumb of the slider.
thumbHeight?: number;: Manages the height of the slider thumb.
thumbWidth?: number;: Manages the width of the slider thumb.

More customisations are on the way......

Request

Please report bugs and contribute to this project if you want to give back to the community. 🙏 All contributions are welcome 🎉!