Slider
The Slider provides a draggable thumb on a track for selecting numeric values.
Basic Usage
import { Slider } from "@paramanu/forms-react"
export default function App() { return <Slider aria-label="Volume" />}<div class="pm-slider pm-slider--md pm-slider--horizontal" role="slider" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>Accessibility
| Feature | Detail |
|---|---|
role="slider" | Slider role on root |
aria-valuemin/max | Range boundaries |
aria-orientation | Horizontal or vertical |
| Keyboard | Arrow keys adjust value |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "md" | Slider size |
orientation | "horizontal" | "vertical" | "horizontal" | Track orientation |
disabled | boolean | false | Disabled state |
showMarks | boolean | false | Show tick marks |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | — | Step increment |