@mshafiqyajid/react-slider
Headless slider hook and styled component. Single and range (dual thumb) mode, marks, value tooltip, keyboard navigation, ARIA-compliant.
Playground #
Props
TSX
import { SliderStyled } from "@mshafiqyajid/react-slider/styled";
import "@mshafiqyajid/react-slider/styles.css";
<SliderStyled
value={value}
onChange={setValue}
tone="primary"
/>Install #
npm install @mshafiqyajid/react-sliderQuick start #
import { SliderStyled } from "@mshafiqyajid/react-slider/styled";
import "@mshafiqyajid/react-slider/styles.css";
const [v, setV] = useState(40);
<SliderStyled value={v} onChange={setV} tone="primary" showValue />
// Range
const [range, setRange] = useState<[number, number]>([20, 80]);
<SliderStyled value={range} onChange={setRange} range />API #
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | [number, number] | — | Controlled value |
| defaultValue | number | [number, number] | min | Uncontrolled initial value |
| onChange | (v) => void | — | Called on change |
| min | number | 0 | Minimum value |
| max | number | 100 | Maximum value |
| step | number | 1 | Step increment |
| range | boolean | false | Dual thumb range mode |
| size | "sm" | "md" | "lg" | "md" | Track height |
| tone | "neutral" | "primary" | "success" | "danger" | "neutral" | Color |
| showValue | boolean | false | Show value tooltip on thumb |
| marks | boolean | false | Show tick marks |
| disabled | boolean | false | Disable interaction |