Go to AntUIKit homepage

Slider

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

Preview in FigmaLLMs

Usage

When a slider is the right control for a number, and what range, step, marks and the tooltip each change.

When to use

A slider sets a number by position. The reader gives up typing and gets a sense of where the value sits between the two ends.
Use it when the position matters more than the exact number: volume, opacity, zoom, or a price filter the reader sweeps while the results change.
Use something else when:
  • The exact value matters. An InputNumber can be typed, pasted and read at a glance, as for a budget, a quantity or an age.
  • There are a few named steps. Four sizes or three quality levels are options, not a scale. Use Segmented or a Radio group.
  • The reader should drag and type. Put a Slider beside an InputNumber and give both the same value and onChange.
  • The value is a date or a time (DatePicker), or one of two (Switch).

One value or a range

range changes the type of the value. Without it, value, defaultValue and onChange use a number. With it, they use an array, so adding range breaks a handler written for a number, and TypeScript tells you.
  • Two handles are the two ends of one interval. Two unrelated numbers are two sliders.
  • draggableTrack lets the reader move the whole filled span without changing its width, like panning a time window.
  • editable lets the reader add a handle by clicking the rail, and remove one by dragging it off or pressing Backspace or Delete. Set minCount, which starts at 0, so the last handle cannot be removed. editable and draggableTrack do not work together.
  • allowCross is on by default, so the handles can pass each other. Turn it off for “from” and “to” values, and use pushable to keep a minimum gap.

min, max and step

min is 0 and max is 100 by default. Show the unit somewhere near the slider, since a bare 0 to 100 means nothing on its own.
  • step is 1 by default and sets how far a drag or an arrow key moves. Choose it from what the value means: 1 for a percentage, 5 for a price, 0.1 for a gain.
  • Decimal steps are rounded for you, so a step of 0.1 does not drift into 0.30000000000000004.
  • A step of 0 or less is treated as 1, and min and max can always be reached, even when the range is not a whole number of steps.
  • step={null} snaps to marks and nothing between them. Without marks, only the two ends are left, which looks broken.

Marks

marks maps values to labels. A label is a node, or a style and label pair. Clicking a mark moves the handle there.
  • Say what the point means, with the unit: “0°C” and “100°C”, or “Free” and “Unlimited”.
  • Three to five marks make a scale. With ten, the labels overlap on a narrow rail.
  • Color a mark with a theme variable, like var(--ant-color-error), not a hex, so it follows light and dark mode.
  • Marks sit below the rail and add height, so leave room in a dense form row. They only show as passed while included is on.

The tooltip

The value tooltip opens on hover, on focus and while dragging, so keyboard users see it too.
  • It shows the bare number, 42 and not 42%. Add the unit with tooltip.formatter.
  • tooltip={{ formatter: null }} hides it. Use that when the value is already shown beside the slider.
  • tooltip={{ open: true }} keeps it shown, and false hides it even on hover. On a range, a pinned tooltip shows one per handle.
  • The formatter does not change what screen readers hear. Set ariaValueTextFormatterForHandle for that. See the Accessibility tab.

Vertical and reversed

  • vertical stands the slider upright. It takes its height from its parent, so give the parent a height or the slider collapses.
  • A vertical slider runs from bottom to top. reverse flips which end is the minimum, and works with vertical too.
  • Do not use reverse for right-to-left layouts. The slider already flips there, so reverse would flip it back.
  • A vertical slider is shorter than a horizontal one and less precise. Use it next to something vertical, like a level meter, and rarely in a form.

included and dots

  • included is on by default and fills the rail from the start to the handle. That suits an amount, like a volume or a budget.
  • Turn it off when the value is a point on a scale, like a hue or a position in a document. The fill goes away, and marks behind the handle stop showing as passed.
  • dots draws a dot at every step and every mark. Use it only with a few steps: on 0 to 100 with a step of 1, that is 101 dots.
  • With step={null}, dots does nothing, but the marks still get their own dots.

Disabled

  • disabled takes a boolean, or an array with one entry per handle, so a range can lock one end and let the other move.
  • The other handles cannot pass a locked one, and pushable sets how close they can get.
  • A disabled handle cannot be focused, so a keyboard user cannot reach its value. Show the number as text nearby if it still matters.
  • If the value matters and only editing is gone, show it as text instead of a disabled slider.
SkeletonSpace
© 2026 AntUIKit . All rights reserved.