Slider

A control that lets users select a numeric value from a range by dragging a thumb along a track.

Overview

The Slider component provides an accessible way to select numeric values within a range. It supports labels, live value display, custom formatting, range selection (two thumbs), and three sizes. Built on Base UI's Slider primitive.

tsx

import { Slider } from "@rogo-technologies/ui/slider"

<Slider defaultValue={50} label="Volume" showValue />

Basic

A slider with a label and live value readout.

Volume50

tsx

<Slider defaultValue={50} label="Volume" showValue />

Sizes

Use the size prop to control the track height and thumb size. The default size is md.

Size	Track Height	Thumb	Use Case
`sm`	4px (h-1)	14px	Compact controls, settings panels
`md`	6px (h-1.5)	16px	Default — forms, dialogs
`lg`	8px (h-2)	20px	Prominent controls, hero sections

Small30

Medium50

Large70

tsx

<Slider defaultValue={30} size="sm" label="Small" showValue />
<Slider defaultValue={50} size="md" label="Medium" showValue />
<Slider defaultValue={70} size="lg" label="Large" showValue />

Custom Format

Use the formatValue prop to customise how the value is displayed.

Temperature72°F

tsx

<Slider
  defaultValue={72}
  label="Temperature"
  showValue
  formatValue={(v) => `${v}°F`}
/>

Steps

Use the step prop to snap the thumb to discrete increments.

Opacity50%

tsx

<Slider
  defaultValue={50}
  step={10}
  label="Opacity"
  showValue
  formatValue={(v) => `${v}%`}
/>

Range

Pass an array to defaultValue and render two SliderThumb components for range selection. Use the sub-components for full control.

Price range$25 — $75

tsx

import {
  SliderRoot, SliderControl, SliderTrack,
  SliderIndicator, SliderThumb, SliderLabel, SliderValue,
} from "@rogo-technologies/ui/slider"

<SliderRoot defaultValue={[25, 75]}>
  <div className="flex items-end justify-between">
    <SliderLabel size="md">Price range</SliderLabel>
    <SliderValue size="md">
      {(_formatted, values) => `$${values[0]} — $${values[1]}`}
    </SliderValue>
  </div>
  <SliderControl>
    <SliderTrack size="md">
      <SliderIndicator size="md" />
      <SliderThumb size="md" index={0} aria-label="Minimum price" />
      <SliderThumb size="md" index={1} aria-label="Maximum price" />
    </SliderTrack>
  </SliderControl>
</SliderRoot>

Disabled

Use the disabled prop to prevent interaction.

Disabled40

tsx

<Slider defaultValue={40} disabled label="Disabled" showValue />

Custom Composition

Use the sub-components directly for full styling control. Each part accepts its own className so you can override track color, indicator style, or thumb appearance.

Custom composition60%

tsx

<SliderRoot defaultValue={60} min={0} max={100}>
  <div className="flex items-end justify-between">
    <SliderLabel size="md">Custom composition</SliderLabel>
    <SliderValue size="md">
      {(_formatted, values) => `${values[0]}%`}
    </SliderValue>
  </div>
  <SliderControl>
    <SliderTrack size="lg" className="bg-quaternary">
      <SliderIndicator size="lg" className="bg-brand-inverted" />
      <SliderThumb size="lg" />
    </SliderTrack>
  </SliderControl>
</SliderRoot>

Interactive

A fully controlled slider with external value control.

Controlled slider50

tsx

const [value, setValue] = useState(50)

<Slider
  value={value}
  onValueChange={(v) => setValue(v)}
  label="Controlled slider"
  showValue
/>

Props

Composed `Slider`

The composed component wraps all sub-components into a single, convenient API.

Prop	Type	Default	Description
`value`	`number \| number[]`	—	Controlled value.
`defaultValue`	`number \| number[]`	—	Uncontrolled initial value.
`onValueChange`	`(value: number \| number[]) => void`	—	Called during value changes.
`onValueCommitted`	`(value: number \| number[]) => void`	—	Called on pointer up.
`min`	`number`	`0`	Minimum allowed value.
`max`	`number`	`100`	Maximum allowed value.
`step`	`number`	`1`	Step increment.
`disabled`	`boolean`	`false`	Disables the slider.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the slider.
`label`	`string`	—	Label text displayed above the track.
`showValue`	`boolean`	`false`	Whether to show the value readout.
`formatValue`	`(value: number) => string`	—	Custom value formatter.
`className`	`string`	—	Additional CSS classes for the root.
`trackClassName`	`string`	—	Additional CSS classes for the track.
`indicatorClassName`	`string`	—	Additional CSS classes for the indicator.
`thumbClassName`	`string`	—	Additional CSS classes for the thumb.

Sub-components

For custom layouts, import the individual parts:

Component	Description
`SliderRoot`	Root container. Accepts all `Slider.Root` props + `size`.
`SliderControl`	Draggable interaction area.
`SliderTrack`	The visible track. Accepts `size`.
`SliderIndicator`	The filled range portion. Accepts `size`.
`SliderThumb`	The draggable handle. Accepts `size` and `index` (for range).
`SliderValue`	Displays the current value. Accepts `size` and `children` render function.
`SliderLabel`	Label element. Accepts `size`.

Usage Guidelines

Do

Provide a label or aria-label for accessibility
Use showValue when the exact number matters to the user
Use formatValue to add units (%, px, °F, etc.)
Use step for values that should snap to discrete increments
Use range sliders for min/max filters (e.g., price range)

Don't

Don't use a slider when only a few discrete values exist — use radio buttons or a select instead
Don't hide the value when precision matters — show it with showValue
Don't use a slider for text input or non-numeric values
Don't set min and max too close together — the control becomes imprecise

PreviousSelect

NextTabs