#Slider

Sets an approximate, bounded value by dragging along a track — reach for NumberInput when the exact figure matters, since a slider is faster to move than it is to land. A slider should always show its value: pair it with SliderInput for entry, or SliderValue for a readout. It implies a continuum, so a few fixed choices belong in SegmentedControl, Radio or Select, and on/off in Switch.

Source · Storybook

#Usage

import { Slider, SliderControl, SliderThumb } from '@wallarm-org/design-system/Slider';

#Examples

#Range

Two entries in the value make two thumbs; render one SliderThumb per entry. The thumbs cannot cross, so the pair always reads as a valid range.

#Ticks

SliderMarks draws ticks along the scale. Keep step aligned to the marks, or the handle lands between them and the ticks stop meaning anything.

#Ticks without snapping

The same marks used purely for orientation, with step finer than their spacing. Choose this when the marks are a guide rather than the only valid answers.

#Labeled

Marks carrying text, for a scale whose steps are named rather than numeric. The handle snaps to the labelled positions and announces the label rather than the number, so keep it to a handful of rungs.

#With tooltip

tooltip on a SliderThumb shows the value while dragging, then hides it. It suits a value only checked mid-gesture; anything needed afterwards wants a persistent readout instead, never both.

#With input

SliderInput is the precision escape hatch: the track for approximate moves, the field for an exact figure. Typing commits on blur or Enter rather than live, so clamping never fights a half-typed number.

#Range with input

A field at each end, low on the left and high on the right. Neither crosses the other, so the fields cannot produce a range the track could not.

#Disabled

The whole control dims and stops responding, handle included. The value stays legible, because a locked setting is usually one the reader still needs to read.

#In field

Wrapped in Field, which is the form-field shape. The slider reads that context, so the label and error attach without being passed anything.

#Field with error

invalid on the Field cascades to the handle. The message is FieldError's job, and it matters here because a slider cannot show a wrong value the way a text field can.

#Field with value

The value beside the label, which is the readout Figma draws for a slider in a form — value beside label is the drawn default, not one option among several.

#Range field with value

Both ends beside the label, comma-separated. For a range this is the only way to read the value without hovering each thumb.

#With value readout

SliderValue reads the slider's own context, so a live readout needs no controlled state of its own.

#Props

#SliderInput

#SliderMarks

#SliderThumb

#SliderValue