Gathering detailed insights and metrics for two-thumb-range-slider
Gathering detailed insights and metrics for two-thumb-range-slider
Installations
npm install two-thumb-range-sliderDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.0.0
NPM Version
9.6.4
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
1.0.1
Package Id
two-thumb-range-slider@1.0.1
Unpacked Size
47.26 kB
Size
10.32 kB
File Count
18
NPM Version
9.6.4
Node Version
20.0.0
Published on
Jul 23, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
21
@rollup/plugin-commonjs@rollup/plugin-terser@rollup/plugin-typescript@storybook/addon-essentials@storybook/addon-interactions@storybook/addon-links@storybook/addon-onboarding@storybook/blocks@storybook/react@storybook/react-vite@storybook/testing-library@types/reactpostcssreactreact-domrollup-plugin-dtsrollup-plugin-peer-deps-externalrollup-plugin-postcssstorybooktslibtypescript
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
How to install?
npm i two-thumb-range-slider
How to use?
Usage in React powered application 👇:
1export const MultiRangeSliderBasicUsage = () => { 2 const [value, setValue] = useState([1, 100]); 3 return <MultiRangeSlider min={1} max={1000} value={value} onChange={setValue} /> 4}
Just do this and you are ready to rock! 🥳
Required props
1min: number 2max: number 3value: number[] 4onChange: Dispatch<SetStateAction<number[]>>
Customisations
height?: number;: Defines the height of the slider containersliderInactiveBackgroundColor?: 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 🎉!
No vulnerabilities found.
No security vulnerabilities found.