# two-thumb-range-slider

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

Latest version **1.0.1** (published 2023-07-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install two-thumb-range-slider
pnpm add two-thumb-range-slider
yarn add two-thumb-range-slider
bun add two-thumb-range-slider
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-07-23 |
| First published | 2023-07-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 47.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Om Prashant Londhe |
| Maintainers | om-londhe |
| Keywords | slider, om-londhe, multi-range, multi-range-slider, range-slider, range, range-component, slider-component, react-slider, react-range |

## Links

- npm: https://www.npmjs.com/package/two-thumb-range-slider
- npm.io page: https://npm.io/package/two-thumb-range-slider

## Dependencies (2)

- [rollup](https://npm.io/package/rollup.md) ^3.26.3
- [@rollup/plugin-node-resolve](https://npm.io/package/@rollup/plugin-node-resolve.md) ^15.1.0

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2023-07-23
- 1.0.0 — 2023-07-22

## 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 👇:
```typescript
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
```typescript
min: number
max: number
value: number[]
onChange: Dispatch<SetStateAction<number[]>>
```

## Customisations
1. `height?: number;`: Defines the height of the slider container
2. `sliderInactiveBackgroundColor?: string;`: Background colour of inactive portion of the slider.
3. `sliderActiveBackgroundColor?: string;`: Background colour of the active portion of the slider.
4. `sliderHeight?: number;`: Defines the height of the slider.
5. `sliderInactiveRadius?: number;`: Radius for the inactive portion of the slider.
6. `sliderActiveRadius?: number;`: Radius for the active portion of the slider.
7. `thumbColor?: string;`: Thumb colour of the slider.
8. `thumbRadius?: number;`: Thumb radius for the slider.
9. `thumbBorder?: string;`: Border of thumb of the slider.
10. `thumbHeight?: number;`: Manages the height of the slider thumb.
11. `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 🎉!

---
_Source: https://npm.io/package/two-thumb-range-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._