## Overview [#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 [#usage] ```tsx import { Slider, SliderThumb, } from "@tilt-legal/cubitt-components/slider"; ``` ```tsx ``` Use `showTooltip` when the slider should show the current value while dragging. When tooltips are enabled, the slider renders the required thumbs internally. ```tsx `${value}%`} /> ``` ## URL State [#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. ```tsx ``` ## Examples [#examples] ### Default [#default] ### Range [#range] ### Labels [#labels] ### Tooltip [#tooltip] ### Ticks [#ticks] ### Price Range [#price-range] ### Rating [#rating] ### Climate Control [#climate-control] ### Vertical [#vertical] ### Disabled [#disabled] ### URL State [#url-state-1] ## API Reference [#api-reference] ### Slider [#slider] The root slider component owns the track, indicator, URL state integration, and optional tooltip rendering. | 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 [#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 [#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. |