Slider

An input where the user selects a value from within a given range. Writing direction is passed through to Radix so the axis, range fill, and keyboard arrows follow LTR/RTL — toggle direction in the preview.

Basic

Pick a value from a continuous range.

Installation

CLI

npx @sonojs/ui@latest add slider

Composition

structure

Slider

Usage

slider.tsx

import { Slider } from "@/components/ui/slider"

export function Example() {
  return <Slider defaultValue={[33]} max={100} step={1} />
}

Direction

SonoJS reads direction via useDirection and sets dir on the slider root. Min sits on the inline start; max on the inline end.

direction.tsx

import { Slider } from "@/components/ui/slider"

// Inherits writing direction from DirectionProvider / <html dir>.
// In RTL the track fills from the inline start (right) and arrow keys flip.
<Slider defaultValue={[40]} />

// Optional override:
<Slider dir="rtl" defaultValue={[40]} />

Props

Prop	Type	Default	Description
value	number[]	—	Controlled thumb values (one or more).
defaultValue	number[]	—	Uncontrolled initial values.
onValueChange	(value: number[]) => void	—	Called while a thumb moves.
min	number	0	Minimum value.
max	number	100	Maximum value.
step	number	1	Increment between values.
orientation	"horizontal" · "vertical"	"horizontal"	Slider axis.
dir	"ltr" · "rtl"	inherited	Writing direction. Defaults from `useDirection` / `<html dir>`.
disabled	boolean	false	Disable all thumbs.