#
Slider
This slider allows users to select a numeric value in a given range. It supports tooltips, labels, and fully controlled usage.
React / Next.js
Slider
Slider is a pure CSS, React-powered input slider with support for tooltips and flexible props.
Prop | Description | Value(s) |
---|---|---|
`value` | Current slider value (controlled input). | `number (required)` |
`onChange` | Callback to handle value changes. | `(value: number) => void (required)` |
`min` | Minimum allowed value. | `number | default: 0` |
`max` | Maximum allowed value. | `number | default: 100` |
`step` | Amount by which value changes on each move. | `number | default: 1` |
`label` | Label shown above the slider. | `string` |
`showTooltip` | Show tooltip above the slider thumb when dragging. | `boolean | default: true` |
`height` | Height of the slider. | `number | default: 6` |
`funcss` | Additional class names for styling the container. | `string` |