Slider

A value or a range picked by dragging along a track, with marks, steps, a tooltip and a vertical orientation.

Basic

A Slider picks one number between min and max, 0 to 100 by default.

Range

Set range to pick a start and an end with two handles, and get a [start, end] array back.

Draggable track

Set range={{ draggableTrack: true }} to let the reader drag the filled span between the two handles as one piece.

Add and remove handles

Set range={{ editable: true }} to add a handle by clicking the rail and remove one by dragging it off, within minCount and maxCount.

Marks

Pass marks to label points on the rail, and set step={null} so the handle snaps to those points only.

Marks without a fill

Set included={false} to drop the filled track, so the handle points at one value instead of a span from the start.

Step dots

Set step with dots to draw a dot at every step, like one every 10 on a 0 to 100 rail.

Inset

Set inset to draw the handle inside a tall rail, here as a five-step scale and a range.

Inset shapes

Set shape on an inset Slider to square or squircle for the rail, the fill and the handle, or leave it as the pill.

Inset sizes

Set size="small" on an inset Slider for a shorter rail, here with each shape.

Colors

Set color="primary" to paint the fill and handle in the app's primary, on a thin rail or an inset one.

With InputNumber

Pair a Slider with an InputNumber on the same state so the reader can drag or type, for whole numbers or decimals.

Tooltip format

Pass tooltip.formatter to change the value shown on the handle, like adding °C, and tooltip.color to tint the bubble.

Tooltip always shown

Set tooltip={{ open: true }} to keep the value visible above the handle without hovering or dragging.

Without a tooltip

Set tooltip={{ formatter: null }} to hide the value tooltip, for a slider whose value is shown somewhere else.

Vertical

Set vertical to stand the slider upright, with a single value, a range, marks or inset, inside a parent that has a height.

Reverse

Set reverse to put the minimum at the right end, or at the top of a vertical slider.

Change events

onChange fires on every move while dragging, and onChangeComplete fires once on release, which is when to save.

Locked handles

Pass disabled an array with one entry per handle to lock some handles while the others move around them.

In a form

Put a Slider in a Form.Item to submit its value with the form, here with emoji marks at 0, 5 and 10.

API Reference

Slider
Slider's props. Rows marked antuikit in the Version column are added by the kit.
range
The object form of range.
tooltip
The object form of tooltip.
Methods
The methods on Slider's ref.