Slider Component
React slider component built on the native range input: labels, live value, custom formatting, tick marks and three sizes with full keyboard support.
Import
javascript
1import { Slider } from "@neuctra/ui";Basic Usage
Controlled with value + onChange, or uncontrolled with defaultValue.
40%
Steps, Range & Marks
$250
$0$500$1000
Sizes & Disabled
Props
All available props for the Slider component.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | min | Controlled / uncontrolled value |
| onChange | (value: number) => void | — | Fired with the numeric value |
| min / max | number | 0 / 100 | Range bounds |
| step | number | 1 | Increment size |
| label | string | — | Label above the track, linked with htmlFor |
| showValue | boolean | false | Show the live value beside the label |
| formatValue | (v: number) => ReactNode | — | Format the displayed value |
| marks | { value, label? }[] | — | Tick labels under the track |
| size | "sm" | "md" | "lg" | "md" | Track and thumb scale |
| disabled | boolean | false | Disable interaction |
| wrapperClassName | string | — | Styles the outermost wrapper. |
| labelRowClassName | string | — | Styles the row wrapping the label and the current-value text. |
| labelClassName | string | — | Styles the label text above the track. |
| valueClassName | string | — | Styles the live value text shown when showValue is set. |
| marksClassName | string | — | Styles the wrapper around the tick marks rendered under the track. |
| markClassName | string | — | Styles each individual tick mark. |
Accessibility
- Built on the native <input type="range">, so arrow keys, Home/End and screen-reader value announcements work out of the box.
- The label is associated via htmlFor; a visible focus ring appears on keyboard focus.
Frequently Asked Questions
How do I install and import the Slider component?
Install the @neuctra/ui package, then import it with: import { Slider } from "@neuctra/ui";
What variants and sizes does Slider support?
Slider supports sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the Slider component accessible?
Slider is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.