Skip to main content

​
Slider

A slider control with multiple variants and extensive animation support, built on Base UI’s Slider primitive.

​
Base UI Primitive

Built on @base-ui/react/slider

​
Import

import { Slider } from "@soft-ui/react/slider"

​
Usage

import { Slider } from "@soft-ui/react/slider"

export default function Example() {
  return (
    <Slider defaultValue={50} min={0} max={100}>
      <Slider.Control>
        <Slider.Track>
          <Slider.Indicator />
          <Slider.Thumb />
        </Slider.Track>
      </Slider.Control>
    </Slider>
  )
}

​
Components

​
Slider (Root)

​
variant
'default' | 'adjustment' | 'segmented'
default:"'default'"
Visual variant.
  • default: Standard slider with circular thumb
  • adjustment: Compact slider with inline value
  • segmented: Slider with visual segments
​
size
's' | 'm' | 'l'
default:"'m'"
Control size.
  • s: 32px height (adjustment/segmented)
  • m: 36px height (adjustment/segmented)
  • l: 40px height (adjustment/segmented)
​
value
number | readonly number[]
Controlled value.
​
defaultValue
number | readonly number[]
Uncontrolled default value.
​
onValueChange
(value: number | readonly number[]) => void
Callback fired when value changes.
​
min
number
default:"0"
Minimum value.
​
max
number
default:"100"
Maximum value.
​
step
number
default:"1"
Step increment.
​
disabled
boolean
Disables the slider.
​
className
string
Additional CSS classes.
​
unsafeClassName
string
Escape hatch for structural overrides.

​
Slider.Control

​
className
string
Additional CSS classes.
​
unsafeClassName
string
Escape hatch for structural overrides.

​
Slider.Track

​
className
string
Additional CSS classes.
​
unsafeClassName
string
Escape hatch for structural overrides.

​
Slider.Indicator

Filled portion of the track.
​
className
string
Additional CSS classes.
​
unsafeClassName
string
Escape hatch for structural overrides.

​
Slider.Thumb

Draggable thumb control.
​
className
string
Additional CSS classes.
​
unsafeClassName
string
Escape hatch for structural overrides.

​
Slider.Value

Displays current value (for adjustment variant).
​
className
string
Additional CSS classes.
​
unsafeClassName
string
Escape hatch for structural overrides.

​
Slider.AdjustmentTrack

Visual wrapper for adjustment variant.
​
className
string
Additional CSS classes.
​
unsafeClassName
string
Escape hatch for structural overrides.

​
Slider.SegmentedTrack / SelectedSegment / UnselectedSegment / SegmentedGap / SegmentedThumb

Components for segmented variant.

​
Examples

​
Default Variant

import { Slider } from "@soft-ui/react/slider"

export default function Default() {
  return (
    <Slider defaultValue={50} min={0} max={100}>
      <Slider.Control>
        <Slider.Track>
          <Slider.Indicator />
          <Slider.Thumb />
        </Slider.Track>
      </Slider.Control>
    </Slider>
  )
}

​
Adjustment Variant

import { Slider } from "@soft-ui/react/slider"

export default function Adjustment() {
  return (
    <Slider variant="adjustment" defaultValue={50} min={0} max={100}>
      <Slider.Control>
        <Slider.AdjustmentTrack>
          <Slider.Track>
            <Slider.Indicator />
            <Slider.Thumb />
          </Slider.Track>
          <Slider.Value />
        </Slider.AdjustmentTrack>
      </Slider.Control>
    </Slider>
  )
}

​
Segmented Variant

import { Slider } from "@soft-ui/react/slider"

export default function Segmented() {
  return (
    <Slider variant="segmented" defaultValue={50} min={0} max={100}>
      <Slider.Control>
        <Slider.Track>
          <Slider.SegmentedTrack>
            <Slider.SelectedSegment />
            <Slider.SegmentedGap />
            <Slider.SegmentedThumb />
            <Slider.SegmentedGap />
            <Slider.UnselectedSegment />
          </Slider.SegmentedTrack>
          <Slider.Thumb />
        </Slider.Track>
      </Slider.Control>
    </Slider>
  )
}

​
With Custom Step

import { Slider } from "@soft-ui/react/slider"

export default function CustomStep() {
  return (
    <Slider defaultValue={50} min={0} max={100} step={10}>
      <Slider.Control>
        <Slider.Track>
          <Slider.Indicator />
          <Slider.Thumb />
        </Slider.Track>
      </Slider.Control>
    </Slider>
  )
}

​
Animation Configuration

The Slider component supports extensive animation customization via window.__sliderAnimConfig. See slider.tsx:72-188 for complete configuration options.

Build docs developers (and LLMs) love

Get started for freeTalk to us