Slider

Native range input with a filled track and optional live value. Keyboard support comes from the browser.

Example

Volume

<Slider id="volume" label="Volume" value="40" showValue />

Max price

250

<Slider id="price" label="Max price" min="10" max="1000" step="10" value="250" showValue />

Budget

20–80

<Slider id="budget" label="Budget" range valueMin={20} valueMax={80} showValue />

Prop	Type	Default	Description
`min / max / step`	`number`	`0 / 100 / 1`	Range constraints.
`value`	`number`	`50`	Initial value (single mode).
`range`	`boolean`	`false`	Two thumbs sharing `min / max / step`.
`valueMin / valueMax`	`number`	`25% / 75%`	Initial thumb values.
`nameMax`	`string`	`name + "-max"`	Form name for the maximum thumb.
`showValue`	`boolean`	`false`	Live `<output>` next to the track.
`class`	`string`	-	Style passthrough.

:root {
  --ink-slider-fill: 40%;   /* set by script on input */
}