Slider

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

Examples

Equity allocation65%

Size

Label

Show value

Disabled

Custom format

Temperature72°F

Steps

Opacity50%

Range

Price range$25 - $75

Custom composition

Custom composition60%

Controlled

Controlled slider50

Overview

Slider lets users pick a numeric value within a range. It supports labels, live readout, custom formatting, range selection (two thumbs), and three sizes. Built on Base UI Slider.

tsx

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

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

Usage

Sizes

Size	Track height	Thumb	Use case
`sm`	4px	14px	Compact controls, settings panels
`md`	6px	16px	Default: forms, dialogs
`lg`	8px	20px	Prominent controls, hero sections

tsx

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

Custom format

tsx

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

Steps

Snap the thumb to discrete increments.

tsx

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

Range

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

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>;

Custom composition

Sub-components accept their own className so you can override track color, indicator style, or thumb appearance.

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>

Controlled

tsx

const [value, setValue] = useState(50);

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

API

Slider (composed)

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

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`.

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, since the control becomes imprecise

PreviousSkeleton

NextSwitch