ElyriSlider
A slider for single values or two-thumb ranges, with pointer dragging and arrow keys / Home / End / PageUp / PageDown, bounded by min / max / step.
Installation
Add component
pnpm dlx @elyri/cli@latest add sliderExamples
Basic
Set the initial value with defaultValue; drag the thumb or use the arrow keys.
import { Slider } from './components/elyri/Slider';
export function Example() {
return <Slider defaultValue={40} aria-label="Volume" />;
}Range
Pass an array to value for a two-thumb range; the thumbs constrain each other.
import { Slider } from './components/elyri/Slider';
export function Example() {
return <Slider defaultValue={[20, 60]} aria-label="Price" />;
}Step and bounds
Constrain values with min / max / step; both dragging and keyboard snap to the step.
import { Slider } from './components/elyri/Slider';
export function Example() {
return <Slider defaultValue={20} min={0} max={100} step={20} aria-label="Discount" />;
}Value bubble
showValue reveals a bubble while dragging or keyboard-focused; pass "always" to keep it visible. formatValue applies to both the bubble and aria-valuetext.
import { Slider } from './components/elyri/Slider';
export function Example() {
return (
<div>
<Slider defaultValue={60} showValue formatValue={(v) => `${v}%`} aria-label="Opacity" />
<Slider defaultValue={[30, 70]} showValue="always" formatValue={(v) => `${v}`} aria-label="Price" />
</div>
);
}Marks
marks={true} draws a dot at every step; pass an array to mark specific values only.
import { Slider } from './components/elyri/Slider';
export function Example() {
return (
<div>
<Slider defaultValue={40} step={10} marks aria-label="Level" />
<Slider defaultValue={50} marks={[0, 25, 50, 75, 100]} aria-label="Zoom" />
</div>
);
}Sizes
Three sizes: sm / md / lg.
import { Slider } from './components/elyri/Slider';
export function Example() {
return (
<div>
<Slider size="sm" defaultValue={30} aria-label="Small" />
<Slider size="lg" defaultValue={70} aria-label="Large" />
</div>
);
}Disabled
No dragging or keyboard response, and removed from the tab order.
import { Slider } from './components/elyri/Slider';
export function Example() {
return <Slider disabled defaultValue={40} aria-label="Volume" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | number[] | — | Controlled value: number, or number[] for a range |
defaultValue | number | number[] | — | Initial value when uncontrolled, same shape as value |
onValueChange | (value: number | number[]) => void | — | Called with a number, or number[] for a range |
min | number | 0 | Minimum, default 0 |
max | number | 100 | Maximum, default 100 |
step | number | 1 | Step, default 1 |
size | 'sm' | 'md' | 'lg' | 'md' | Size: sm / md / lg |
disabled | boolean | — | Disabled |
invalid | boolean | — | Invalid state: sets aria-invalid; unions with the Field invalid state |
name | string | — | Form field name: renders hidden inputs so the value submits with a native form |
showValue | boolean | 'always' | false | Value bubble: true shows it while dragging / focused, "always" keeps it visible |
formatValue | (value: number) => string | — | Formats the bubble text and aria-valuetext |
marks | boolean | number[] | — | Marks: true marks every step, number[] marks specific values |