Skip to main content
BM

Slider

A labelled range input that shows its value as text, with optional labelled marks.

View source on GitHub

On this page

4px
SliderExample.tsx
import { Slider } from "@/components/Slider";

export function SliderExample() {
  return (
    <Slider
      label="Corner radius"
      min={0}
      max={24}
      defaultValue={4}
      formatValue={(value) => `${String(value)}px`}
    />
  );
}

Examples

Marks

4px

Hint

100%

How much larger headings are than body text.

Controlled

1px

Stored value: 1

Hidden label

100

Disabled

8px

Props

Native range props (value, defaultValue, min, max, step, onChange, name, disabled, ref and the rest) go to the <input>; value and defaultValue are numbers, and min, max and step default to 0, 100 and 1. className and style go to the wrapper.

Slider props
PropTypeDefaultDescription
labelstring—The visible label and the slider's accessible name. Required by the type.
hideLabelbooleanfalseHides the label visually; it still names the slider. The value text stays visible. Only where something else on screen says what it sets.
hintReactNode—Help text under the label, read as the slider's description.
formatValue(value: number) => stringStringTurns the value into the text shown beside the label and announced as the value.
marksreadonly { value: number; label: string }[]—Labelled stops under the track. On a mark, the announced value leads with its label: "Default, 4px".
onValueChange(value: number) => void—Called with the new value as a number, alongside the native onChange.

Component tokens

Slider component tokens
TokenCopyDescriptionAliasesLightDarkPreview
--component-slider-trackThe unfilled track: the control's boundary.color.border.strong#6d7e90from color.gray.500#818b9efrom color.slate.400
--component-slider-track-heightTrack thickness.space.stack.xs0.25remfrom space.10.25remfrom space.1
--component-slider-fillThe track from the minimum to the thumb.color.action.background#b37500from color.gold.600#f5e3c2from color.champagne.100
--component-slider-thumbThe thumb: what the visitor drags.color.action.background#b37500from color.gold.600#f5e3c2from color.champagne.100
--component-slider-thumb-borderA ring around the thumb that separates it from the fill.color.surface.raised#fffffffrom color.gray.0#18202efrom color.slate.900
--component-slider-thumb-sizeThumb diameter and the control's height: at least 24px (WCAG 2.5.8).size.icon.lg1.5remfrom size.61.5remfrom size.6
--component-slider-radiusRounds the track and the thumb.radius.pill9999pxfrom radius.full9999pxfrom radius.full
--component-slider-gapSpace between the label row, hint, track and marks.space.stack.xs0.25remfrom space.10.25remfrom space.1
--component-slider-value-textThe current value beside the label.color.text.muted#455464from color.gray.700#e6ecf3from color.slate.100
--component-slider-mark-textMark labels under the track.color.text.subtle#5d6876from color.gray.600#d3dce6from color.slate.200

Accessibility

  • A native <input type="range"> with a visible <label> tied to it, so it's announced as a slider with its name, and every browser's own keyboard support works. A label is required by the type.
  • The value is shown as text beside the label, so it isn't conveyed by the thumb's position alone. The same text is the slider's aria-valuetext, so it's announced with its unit. The text isn't an <output>, whose status role would announce every step a second time.
  • Marks are a visual aid, hidden from screen readers; on a mark, the announced value leads with the mark's label instead.
  • The thumb is 24px across (WCAG 2.5.8) and takes the focus ring. It's checked to 3:1 against the surfaces, as is the track, in both themes. In forced colors the track and thumb take system colors.
  • Disabled sliders use native disabled: they can't be focused or changed.
Slider keyboard
KeyAction
Arrow Right / Arrow UpIncreases the value by one step.
Arrow Left / Arrow DownDecreases the value by one step.
Page Up / Page DownChanges the value by a larger step, as the browser sets it.
Home / EndSets the minimum or the maximum.