Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/yogendrarana/craftdotui/llms.txt

Use this file to discover all available pages before exploring further.

The Slider component allows users to select a value or range of values by dragging a thumb along a track.

​
Installation

import {
  Slider,
  SliderValue,
  SliderControl,
  SliderTrack,
  SliderIndicator,
  SliderThumb,
} from "@craftdotui/baseui/components/slider";

​
Usage

<Slider defaultValue={50}>
  <SliderControl>
    <SliderTrack>
      <SliderIndicator />
    </SliderTrack>
    <SliderThumb />
  </SliderControl>
</Slider>

​
Components

​
Slider (Root)

​
value
number | number[]
Controlled value(s).
​
defaultValue
number | number[]
Default value(s).
​
onValueChange
function
Callback when value changes.
​
min
number
default:"0"
Minimum value.
​
max
number
default:"100"
Maximum value.
​
step
number
default:"1"
Step increment.
​
orientation
string
default:"horizontal"
Orientation. Options: horizontal, vertical
​
disabled
boolean
Disable the slider.

​
SliderValue

Displays the current value(s).

​
SliderControl

Container for the track and thumbs.

​
SliderTrack

The track background.

​
SliderIndicator

The filled portion of the track.

​
SliderThumb

Draggable thumb control. Add multiple for range sliders.

​
Examples

​
Basic Slider

<Slider defaultValue={50}>
  <SliderValue />
  <SliderControl>
    <SliderTrack>
      <SliderIndicator />
    </SliderTrack>
    <SliderThumb />
  </SliderControl>
</Slider>

​
Range Slider

<Slider defaultValue={[25, 75]}>
  <SliderControl>
    <SliderTrack>
      <SliderIndicator />
    </SliderTrack>
    <SliderThumb />
    <SliderThumb />
  </SliderControl>
</Slider>

​
With Custom Range

<Slider min={0} max={200} step={10} defaultValue={50}>
  <SliderValue />
  <SliderControl>
    <SliderTrack>
      <SliderIndicator />
    </SliderTrack>
    <SliderThumb />
  </SliderControl>
</Slider>

​
Vertical Slider

<Slider orientation="vertical" defaultValue={50}>
  <SliderValue />
  <SliderControl>
    <SliderTrack>
      <SliderIndicator />
    </SliderTrack>
    <SliderThumb />
  </SliderControl>
</Slider>

​
Accessibility

  • Built on @base-ui/react for ARIA support
  • Keyboard navigation (Arrow keys, Page Up/Down, Home, End)
  • Focus visible ring on thumb
  • Proper ARIA labels and values
  • Screen reader announcements for value changes