KQ-782 · TEMPERATURE/SLIDER

Temperature Slider

A slider whose track runs cool cobalt to warm danger, with a clipped copy of the gradient filling to the thumb so the colour at the thumb is the temperature; the thumb and fill glide on glide when set by click, key or host and track the pointer 1:1 while dragging. A sample sentence beside it re-renders as the value warms: each word slot flips at its own threshold, the new word rising on snap under a wash of the track colour that fades. Arrows step, PageUp and PageDown step ten, Home and End jump.

KQ-782 · TEMPERATURE/SLIDER

Waylight release notes · temperature

Temp 0.7 · varied · 0 of 5 words swapped

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/temperature-slider

Props

value / defaultValue: number; default 0.7; Controlled or initial temperature, snapped to the step.
onValueChange: (value: number) => void; default —; Fires from a drag, a track press or a key step.
onSampleChange: (sample: TemperatureSample) => void; default —; Fires with the value: the sentence the sample now reads and how many slots swapped.
min / max / step: number; default 0 / 2 / 0.1; The range and the step the thumb snaps to.
sample: string[][]; default —; Word slots; each slot's variants run steady to wild.
label: string; default —; Names the slider.
format: (value: number) => string; default —; Formats the readout and aria-valuetext; defaults to the step's decimals.

Prop	Type	Default	Description
value / defaultValue	number	0.7	Controlled or initial temperature, snapped to the step.
onValueChange	(value: number) => void	—	Fires from a drag, a track press or a key step.
onSampleChange	(sample: TemperatureSample) => void	—	Fires with the value: the sentence the sample now reads and how many slots swapped.
min / max / step	number	0 / 2 / 0.1	The range and the step the thumb snaps to.
sample	string[][]	—	Word slots; each slot's variants run steady to wild.
label	string	—	Names the slider.
format	(value: number) => string	—	Formats the readout and aria-valuetext; defaults to the step's decimals.