Forms & Input

Slider

Range slider with an optional numeric readout. The filled portion of the track uses the primary color.

Props

Slider extends InputHTMLAttributes<HTMLInputElement>, wrapping a native <input type="range">.

SliderProps props

Prop	Type	Default	Description
`value`	`number`	—	Controlled value.
`defaultValue`	`number`	—	Initial uncontrolled value.
`onChange`	`(value: number) => void`	—	Change handler.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Step increment.
`showValue`	`boolean \| (value: number) => string`	—	Show numeric readout. Pass a function to format with units.
`disabled`	`boolean`	—	Prevents interaction.

Basic slider

Slider with readout

75%250ms

Slider with formatted units

Interactive slider

ImportTSX

import { Slider } from "@solarius/onset";
import type { SliderProps } from "@solarius/onset";