Slider, Asgard Docs

Inputs & forms

Pick a number from a range.

Slider allows users to select a numeric value or range by dragging a thumb along a track.

Key features:

Continuous and discrete modes with custom marks
Range slider via array value (e.g., [20, 80])
Vertical orientation and valueLabelDisplay options
Configurable step, min, and max

Loading preview…

When to use it

Volume, opacity, zoom and other continuous values
Price or date ranges (two handles)
Stepped numeric settings with marks

Properties

Prop	Type	Default	Description
`value`	`number \| number[]`	—	Current value of the slider. Pass an array of two numbers for a range slider.
`onChange`	`(value: number \| number[]) => void`	—	Callback fired when the slider value changes. The handler receives the new value directly, NOT a DOM event (write onChange={(v) => setX(v)}, not e.target.value).
`min`	`number`	`0`	Minimum allowed value.
`max`	`number`	`100`	Maximum allowed value.
`step`	`number`	`1`	Step increment between valid values.
`variant`	`'continuous' \| 'discrete'`	`'continuous'`	Continuous allows any value; discrete snaps to step increments and shows tick marks.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientation of the slider track.
`valueLabelDisplay`	`'on' \| 'off' \| 'auto'`	`'off'`	Controls when the value label tooltip is shown. Auto shows on hover/drag.

Notes

Pass an array value (e.g., [20, 80]) to enable range slider mode with two thumbs.
The discrete variant snaps the thumb to step values and renders tick marks along the track.
Custom marks can be provided as an array of { value, label } objects for labeled tick positions.

Presets