Primitives
Slider
Range slider for selecting a numeric value within a min/max range. Supports multiple sizes, colors, and keyboard interaction.
Installation
npm install @trinkui/reactImport
import { Slider } from "@trinkui/react";Sizes
Small30
Medium50
Large70
Colors
Primary
Secondary
Success
Warning
Danger
Disabled
Disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Controlled value of the slider |
defaultValue | number | 0 | Initial uncontrolled value |
onChange | (value: number) => void | — | Callback when value changes |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Step increment |
label | string | — | Label text above the slider |
showValue | boolean | false | Display current value alongside the label |
size | "sm" | "md" | "lg" | "md" | Track and thumb size |
color | "primary" | "secondary" | "success" | "warning" | "danger" | "primary" | Color theme of the filled track and thumb |
disabled | boolean | false | Disable interaction |
className | string | — | Additional CSS classes |
Accessibility
- Uses
role="slider"on the track element. - Exposes
aria-valuenow,aria-valuemin, andaria-valuemax. - Arrow keys (left/right and up/down) adjust the value by one step.
- Home/End keys jump to the min/max value.
- Thumb is focusable with a visible
focus-visiblering.