Slider

Overview

The Slider component provides an accessible way to select a value or range of values along a continuous or discrete scale. It is built on Base UI primitives and supports keyboard navigation, touch input, range selection, URL state, and optional value tooltips.

Slider tracks are surface-aware. The track lands four levels above the parent surface, the filled indicator uses the default brand fill, and the thumb uses the brand fill without adding its own floating shadow.

Usage

import {
  Slider,
  SliderThumb,
} from "@tilt-legal/cubitt-components/slider";

<Slider defaultValue={[50]} max={100} step={1}>
  <SliderThumb />
</Slider>

Use showTooltip when the slider should show the current value while dragging. When tooltips are enabled, the slider renders the required thumbs internally.

<Slider
  aria-label="Brightness"
  defaultValue={[50]}
  showTooltip
  tooltipContent={(value) => `${value}%`}
/>

URL State

Provide paramName to sync slider values with the current URL. URL state only updates when dragging commits, so the route is not updated on every pointer move.

<Slider defaultValue={[50]} max={100} paramName="volume" step={5}>
  <SliderThumb />
</Slider>

<Slider
  defaultValue={[100, 500]}
  max={1000}
  min={0}
  paramName="price-range"
  step={10}
>
  <SliderThumb />
  <SliderThumb />
</Slider>

Prop	Type	Default	Description
`defaultValue`	`number \| number[]`	-	The uncontrolled initial value.
`value`	`number \| number[]`	-	The controlled value.
`onValueChange`	Base UI slider change callback	-	Called when the value changes.
`onValueCommitted`	Base UI slider commit callback	-	Called when a drag or keyboard interaction commits.
`min`	`number`	`0`	Minimum slider value.
`max`	`number`	`100`	Maximum slider value.
`step`	`number`	`1`	Stepping interval.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Slider orientation.
`disabled`	`boolean`	`false`	Disables all slider interaction.
`showTooltip`	`boolean`	`false`	Renders value tooltips and internal thumbs.
`tooltipContent`	`(value: number) => React.ReactNode`	-	Custom tooltip content.
`name`	`string`	-	Form field name.
`className`	`string`	-	Additional classes for the root slider.
`...props`	Base UI slider root props	-	Additional root props.

URL State Props

Prop	Type	Default	Description
`paramName`	`string`	-	URL parameter name for syncing slider state.
`paramValue`	`number[]`	-	Controlled URL-state value.
`onUrlValueChange`	`(value: number[] \| null) => void`	-	Called when the URL value changes.
`paramClearOnDefault`	`boolean`	`true`	Removes the URL parameter when the value matches the default.
`paramThrottle`	`number`	-	Throttle window for URL updates.
`paramDebounce`	`number`	-	Debounce window for URL updates.

SliderThumb

The draggable thumb control. Render one thumb for a single value and two thumbs for a range, unless showTooltip is enabled on Slider.

Prop	Type	Default	Description
`className`	`string`	-	Additional classes for the thumb.
`...props`	Base UI slider thumb props	-	Additional thumb props.

Slider

Overview

Usage

URL State

Examples

Default

Range

Labels

Tooltip

Ticks

Price Range

Rating

Climate Control

Vertical

Disabled

URL State

API Reference

Slider

URL State Props

SliderThumb

On this page