A small, configurable React range slider component.
npm install react-slider-rangebash
npm install react-slider-range
or
yarn add react-slider-range
or
pnpm add react-slider-range
`
$3
1. Basic Example
`bash
import "react-slider-range/dist/slider.css";
import { Slider } from "react-slider-range";
export default function Example() {
return (
min={0}
max={100}
defaultValue={[20, 80]}
onChange={(value) => console.log(value)}
/>
);
}
`
2.Controlled Example
`bash
import { useState } from "react";
import "react-slider-range/dist/slider.css";
import { Slider } from "react-slider-range";
export default function ControlledExample() {
const [value, setValue] = useState<[number, number]>([30, 70]);
return (
min={0}
max={100}
value={value}
onChange={setValue}
onChangeCommitted={(val) => console.log("Committed:", val)}
/>
);
}
`
$3
| Prop | Type | Default | Description |
| ------------------- | ------------------- | ------------------ | ---------------------------- |
| min | number | 0 | Minimum slider value |
| max | number | 100 | Maximum slider value |
| step | number | 1 | Step increment |
| defaultValue | [number, number] | [min, max] | Initial range (uncontrolled) |
| value | [number, number] | — | Controlled value |
| onChange | (value) => void | — | Fires on value change |
| onChangeCommitted | (value) => void | — | Fires on drag end |
| disabled | boolean | false | Disable slider |
| className | string | "" | Wrapper class |
| trackClassName | string | "" | Track class |
| rangeClassName | string | "" | Active range class |
| thumbClassName | string | "" | Thumb class |
| showTooltip | boolean | false | Show value tooltip |
| formatTooltip | (value) => string | value.toString()` | Tooltip formatter |