Slider

Pick a value or range by dragging or with arrow keys.

Import

import { Slider } from '@marbleui/ui'

Props

<Slider>

Prop	Type	Default
label	`ReactNode`	`—`
showValue	`boolean`	`true`
variant	`'default' \| 'thick'`	`'default'`

Also accepts React Aria props (90).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Slider · React Aria SliderOutput · React Aria SliderThumb · React Aria SliderTrack. Follow the primitive's docs for the full keyboard map.

Usage notes

Pick a number or a range by dragging or with arrow keys. For exact entry use NumberField; for color channels use ColorSlider.

<Slider label="Volume" defaultValue={60} />
<Slider label="Price range" defaultValue={[20, 80]} maxValue={200}
  formatOptions={{ style: 'currency', currency: 'USD', maximumFractionDigits: 0 }} />

A number gives one thumb; an array gives a range with one thumb per entry. Controlled: value + onChange; onChangeEnd fires after a drag ends.
minValue, maxValue, step and formatOptions come from React Aria; the output uses formatOptions. Set showValue={false} to hide the output.
variant: default or thick. Without a visible label, pass aria-label.

Example source · show

import { Slider } from './slider'

export const styles = {
  Default: () => (
    <div className="flex w-72 flex-col gap-6">
      <Slider label="Volume" defaultValue={60} />
      <Slider
        label="Price range"
        defaultValue={[20, 80]}
        formatOptions={{ style: 'currency', currency: 'USD', maximumFractionDigits: 0 }}
        maxValue={200}
      />
    </div>
  ),
  Thick: () => (
    <div className="w-72">
      <Slider variant="thick" label="Opacity" defaultValue={0.7} step={0.01} maxValue={1} formatOptions={{ style: 'percent' }} />
    </div>
  ),
}

Source: packages/ui/src/slider/slider.tsx

Catalog

Category: inputs
Priority: Foundation
Primitive: react-aria
React Aria: Slider
Base UI: Slider