BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Slider

Stable
Edit in Studio

Picks a value or a range by position on a continuous scale, with the formatted value shown at the end of the track.

Updated Oct 16, 2026

Rendered with the real component
Light
4.5
Dark
4.5

When to use

Use it for

  • Approximate values where the position matters more than the exact number: opacity, threshold, zoom.
  • A range with two thumbs: pass an array of two numbers.
  • Live previews: update on onValueChange, save on onValueCommitted.

Not for

  • An exact number the user knows: use NumberField.
  • Very large ranges where one step is tiny: pair it with a NumberField or use NumberField alone.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

48%
Do

Show the value and its unit

format makes the value readable: 48%, 4.5, 16 px.

8,080
Don't

A slider for precise input

Dragging to exactly 37 is frustrating. Use NumberField when the exact number matters.

Accessibility

  • Base UI Slider: each thumb is a native range input with role slider, aria-valuenow and aria-valuetext from format.
  • Arrow keys step, Page Up and Page Down or Shift+arrow use largeStep, Home and End jump to min and max.
  • Range thumbs are named "<label> minimum" and "<label> maximum"; override with thumbLabels.
  • The filled range uses the signal color (3:1 on the muted track); focus rings the thumb.

Anatomy and tokens

Read from packages/react/src/components/Slider/Slider.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

22 tokens 14 semantic or component, change with theme and brand 8 from the shared scales

Props

Parsed from the TypeScript types in packages/react/src/components/Slider/Slider.tsx, so this table cannot drift from the code.

Prop Type Default Description
label string none Visible label. When set, the Slider wraps itself in a Field. Leave unset inside a Field.
hint ReactNode none No description in the code yet.
error ReactNode none No description in the code yet.
value number | number[] none A number for one thumb, an array of two numbers for a range.
defaultValue number | number[] none No description in the code yet.
onValueChange (value: number | number[]) => void none Fires while dragging.
onValueCommitted (value: number | number[]) => void none Fires once when the user releases the thumb or stops pressing keys. Use it for expensive work.
min number none No description in the code yet.
max number none No description in the code yet.
step number none No description in the code yet.
largeStep number none Step for Page Up, Page Down and Shift+arrow. Default 10.
format Intl.NumberFormatOptions none Intl format for the displayed value, for example `{ style: 'percent' }`.
showValue boolean true Show the formatted value at the end of the track. Default true.
thumbLabels string[] none Accessible names of the thumbs when there is no visible label, or to name range ends.
name string none No description in the code yet.
disabled boolean none No description in the code yet.
hideLabel boolean none No description in the code yet.
className string none No description in the code yet.

Playground

Change the props and see the real Slider update. Controls are generated from the TypeScript props; nothing here changes the system.

4.5
<Slider label="Minimum contrast" />

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Slider in Storybook) .

Embed Storybook stories here (4)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

Default

Range

Percent

AllStates

Changelog

  • New

    Forms: Field (label, description, error wired by Base UI Field) and Input rebuilt on it (prefix, suffix, sizes; label, hint and error props kept). New Textarea (autosize, character count), Select (groups, descriptions), Combobox (filtering, async loading and empty states, multiple with chips), Checkbox (indeterminate, parent), CheckboxGroup, RadioGroup, Switch, Slider (single and range), NumberField (steppers, units) and Form (server errors with a focusable error summary, FormActions footer).

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

  • New

    Bridge token system v1. Adds a brand mapping layer (`bridge` default, `ocean` alternate) between primitives and semantic tokens, a component tier (button, input, checkbox, switch, slider, card, popup, dialog, tooltip, toast, table, tabs, progress, nav), comfortable and compact density, motion durations and easings with a reduced-motion override, layers (z-index), icon sizes, breakpoints, a 1.2 type scale from 14px with tracking tokens, and self-hosted IBM Plex Sans and Mono (`@bridge-ds/tokens/fonts.css`). Primitives are regenerated in OKLCH on one lightness ladder. The build now writes `dist/resolved.json` and fails when any pair in `contrast.checks.json` drops below its WCAG minimum in any brand and theme. Fixes `color.border.strong` against `color.surface.default` (now at least 3:1 in both themes).

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

All release notes