Slider — Loidolt Theme

import { Slider } from '@loidolt/theme-svelte';

Example

Notes

Pass an array to value for a range; each entry gets a thumb, named from label by thumbLabel.
formatValue feeds both the visible readout and aria-valuetext, so put the units there.
Use onValueCommit to save: it fires once when a drag ends, while onValueChange fires throughout.
On touch screens each thumb has an invisible 44px target, so its drawn size stays compact.

Props

Generated from the component source, so it cannot drift from the implementation.

Slider props
Prop	Type	Default	Notes
`label` required	`string`	`—`	Accessible name. With two or more thumbs each is named from it by `thumbLabel`.
`children`	`Snippet`	`—`	Rendered after the track, e.g. min/max captions.
`class`	`string`	`—`
`disabled`	`boolean`	`false`
`formatValue`	`(value: number) => string`	`String`	Spoken (`aria-valuetext`) and shown for each value — add units here: `(v) => \`${v} mm\.
`max`	`number`	`100`
`min`	`number`	`0`
`name`	`string`	`—`	Submits each value as a hidden input under this name.
`onValueChange`	`(value: V) => void`	`—`	Every change, while dragging too.
`onValueCommit`	`(value: V) => void`	`—`	Only when the user lets go or finishes a key press — the moment to save.
`orientation`	`Orientation`	`'horizontal'`
`ref` bindable	`HTMLDivElement \| null`	`null`
`showValue`	`boolean`	`false`	Show the formatted value beside the track.
`step`	`number \| number[]`	`1`	The increment, or an explicit list of the only values allowed.
`thumbLabel`	`(index: number, count: number) => string`	(index, count) => count === 1 ? label : `${label}, ${index === 0 ? 'minimum' : 'maximum'}`
`ticks`	`boolean`	`false`	Mark every step along the track. Sensible only for a coarse `step`.
`value` bindable	`V`	`0 as V`	A number for one thumb, an array for a range — one thumb per entry.

Plus the attributes of Omit<HTMLAttributes<HTMLDivElement>, 'children'>, forwarded to the root element.