Slider

Interactive

See Slider in Storybook for every variant, with live controls.

A range input with a mono readout. For a value that must be exact, use Input type="number" instead.

import { Slider } from "@kairosis/eidos";

<Slider label="CPU limit" unit="%" value={cpu} onChange={setCpu} />;

Props

Prop	Type	Default	Description
value	number	—	Required. Controlled
onChange	(value: number) => void	—	Receives a number, already coerced
label	string	—
min / max	number	0 / 100
step	number	1
showValue	boolean	true	Mono readout above the track
unit	string	""	Suffix for the readout, e.g. "%"
disabled	boolean	false

Forwards a ref to the underlying <input type="range">.

Guidelines

• A real range input sits transparent on top of the painted rail, so it keeps native keyboard and pointer behaviour.
• The filled portion is driven by a --slider-fill custom property, not by re-rendering the track.
• Use unit rather than baking the symbol into the label — the readout is the value, the label is the name.