Slider

Import

import { Slider } from 'tuimorphic';

Basic Usage

<Slider />

Props

Prop	Type	Default	Description
`value`	`number`	—	Current value (controlled)
`defaultValue`	`number`	`0`	Default value (uncontrolled)
`onValueChange`	`(value: number) => void`	—	Callback when value changes
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment
`label`	`string`	—	Label text
`showValue`	`boolean`	`false`	Whether to show current value
`disabled`	`boolean`	`false`	Whether the slider is disabled
`className`	`string`	—	Additional CSS class names
`ref`	`React.Ref<HTMLDivElement>`	—	Forwarded ref to the container

With Label

Volume

<Slider label="Volume" />

Show Value

Brightness

<Slider label="Brightness" showValue />

Custom Range

Temperature

<Slider label="Temperature" min={0} max={50} defaultValue={25} showValue />

Step Values

<Slider label="Step 1 (default)" min={0} max={100} step={1} showValue />
<Slider label="Step 5" min={0} max={100} step={5} showValue />
<Slider label="Step 10" min={0} max={100} step={10} showValue />
<Slider label="Step 25" min={0} max={100} step={25} showValue />

States

<Slider label="Enabled" defaultValue={50} showValue />
<Slider label="Disabled" defaultValue={50} showValue disabled />

Controlled Slider

Progress

Value: 50

const [value, setValue] = useState(50);
 
<Slider
  label="Brightness"
  value={value}
  onValueChange={setValue}
  showValue
/>

Volume Control Example

const [volume, setVolume] = useState(75);
 
<Slider
  label="Volume"
  value={volume}
  onValueChange={setVolume}
  showValue
/>

Interactive RGB Example

const [r, setR] = useState(128);
const [g, setG] = useState(128);
const [b, setB] = useState(128);
 
<Slider label="Red" min={0} max={255} value={r} onValueChange={setR} showValue />
<Slider label="Green" min={0} max={255} value={g} onValueChange={setG} showValue />
<Slider label="Blue" min={0} max={255} value={b} onValueChange={setB} showValue />

Visual Design

The slider uses ASCII characters to create a terminal-style track:

Track: - (box drawing horizontal)
Handle: * (bullet)
Display: [-----*------]

Key	Action
`Arrow Left` / `Arrow Down`	Decrease by step
`Arrow Right` / `Arrow Up`	Increase by step
`Home`	Go to minimum
`End`	Go to maximum
`Page Up`	Increase by large step
`Page Down`	Decrease by large step

Accessibility

Built on Base UI's accessible slider primitive
Proper ARIA attributes for screen readers
Full keyboard navigation support
Focus visible states

Styling

Variable	Description
`--theme-text`	Track and handle color
`--theme-border`	Container border
`--theme-focused-border`	Focus outline color

Input - For numeric text entry
Toggle - For on/off values

Import

Basic Usage

Props

With Label

Show Value

Custom Range

Step Values

States

Controlled Slider

Volume Control Example

Interactive RGB Example

Visual Design

Keyboard Navigation

Accessibility

Styling

On this page