Slider
@/components/kamod-ui/slider
Installation
Import Slider from `@/components/kamod-ui/slider`. The live preview below matches the kitchen sink default (single thumb, shadcn-style array defaultValue).
pnpm add @kamod-ch/uiUsage
Pass `defaultValue` or `value` as a number or array (one thumb per entry). Use `onValueChange` for controlled updates.
import { Slider } from "@/components/kamod-ui/slider";<Slider />Basic (shadcn-style array)
Single thumb using array syntax, matching the Radix/shadcn API.
Range
Two values produce a range slider with a filled track between the thumbs.
Multiple thumbs
Use three or more values for multiple thumbs along the same track.
Stepped
Use step values for discrete increments.
Controlled (single)
Store the value in state; `onValueChange` receives a number array (length 1 for a single thumb).
Controlled (range)
Controlled range on a fractional scale, similar to the shadcn docs demo.
Disabled
Disable interaction for single or range sliders.
API Reference
Props, slots and variants for this component.
Slider
Slider component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| defaultValue | number | number[] | 50 (single) |
| value | number | number[] | undefined |
| onValueChange | (value: number[]) => void | undefined |
| onValueCommit | (value: number[]) => void | undefined |
| orientation | "horizontal" | "vertical" | "horizontal" |
| min / max / step | number | 0 / 100 / 1 |
| disabled | boolean | false |
| onInput | (event) => void | undefined |
| class | string | undefined |
Accessibility Notes
Provide a visible label or `aria-label`. For multi-thumb sliders, each thumb exposes a short default label; override via props spread to the first thumb where needed.