Slider

Slider with spring-curve thumb drag. Tooltip appears on focus/drag, supports keyboard precision stepping.

Basic Usage

import { Slider } from '@airo-ui/react'
import { useState } from 'react'

function Demo() {
  const [value, setValue] = useState(40)

  return (
    <div>
      <Slider value={value} onChange={setValue} />
      <p style={{ marginTop: 12, fontSize: 13, color: 'var(--vp-c-text-2)' }}>
        Value: {value}
      </p>
    </div>
  )
}

Custom Range & Step

<Slider value={value} onChange={setValue} min={0} max={200} step={10} />

Decimal Step

<Slider value={value} onChange={setValue} min={0} max={1} step={0.1} />

Tooltip Formatting

<Slider value={value} onChange={setValue} formatTooltip={(v) => `${v}%`} />

Size / Disabled

<Slider value={40} size="sm" />
<Slider value={40} size="md" />
<Slider value={40} disabled />

API

Props

Name	Type	Default	Description
value	number	--	Controlled value
defaultValue	number	0	Default value (uncontrolled)
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step, supports decimals
disabled	boolean	false	Disabled
size	'sm' | 'md'	'md'	Size
tooltip	boolean	true	Show tooltip
formatTooltip	(value: number) => string | number	--	Custom tooltip content
onChange	(value: number) => void	--	Value change handler

Keyboard Interaction

Key	Behavior
ArrowLeft / ArrowDown	Decrease by 1 step
ArrowRight / ArrowUp	Increase by 1 step
Shift + Arrow	Step x 10
Home	Jump to minimum
End	Jump to maximum

Accessibility

• Thumb uses role="slider" with aria-valuemin / aria-valuemax / aria-valuenow / aria-orientation
• tabIndex set to -1 when disabled, focus ring follows global :focus-visible
• Screen reader announces current value