Skip to main content

​
Overview

Volume60
Price range20–20 – 80
Slider lets users select a value or range by dragging a thumb along a track. Use it for settings like volume, brightness, or price range filters.

​
Installation

npm install @araf-ds/core

​
Usage

import { Slider } from "@araf-ds/core"

export default function Example() {
  return (
    <Slider defaultValue={[50]} min={0} max={100} label="Volume" showValue />
  )
}

​
Variants

​
Basic

Volume
<Slider defaultValue={[50]} min={0} max={100} label="Volume" />

​
With Value Display

Brightness30
<Slider defaultValue={[30]} label="Brightness" showValue />

​
Range Slider

Price range20–20 – 80
<Slider defaultValue={[20, 80]} label="Price range" showValue />

​
Disabled

Locked setting
<Slider defaultValue={[40]} disabled label="Locked setting" />

​
API Reference

​
value
number[]
Controlled value(s). One element for single, two elements for range.
​
defaultValue
number[]
default:"[0]"
Uncontrolled default value.
​
onValueChange
(value: number[]) => void
Callback fired when the value changes while dragging.
​
min
number
default:"0"
Minimum value.
​
max
number
default:"100"
Maximum value.
​
step
number
default:"1"
Increment step between values.
​
label
string
Label shown above the slider.
​
showValue
boolean
default:"false"
Displays the current value next to the label.
​
disabled
boolean
default:"false"
Disables the slider.
​
orientation
string
default:"horizontal"
Layout orientation. Values: horizontal · vertical
​
className
string
Additional Tailwind classes for custom overrides.

​
Accessibility

  • Slider uses role="slider" with aria-valuenow, aria-valuemin, and aria-valuemax
  • Arrow keys move the thumb by one step; Page Up/Down move by 10% of the range
  • Home/End keys jump to minimum/maximum
  • Range sliders have two separate thumb elements, each keyboard-navigable
  • disabled uses aria-disabled="true" and removes the element from tab order
  • Label is associated via aria-labelledby

​
Do’s & Don’ts

Do

  • Use Slider for continuous numeric values where precision isn’t critical
  • Always show the current value with showValue when precision matters
  • Use step to constrain values to meaningful increments
  • Use a range Slider for min/max filtering (price, date)

Don't

  • Don’t use Slider when an exact value must be entered — use a number Input
  • Don’t use very small steps on a short track — it becomes imprecise
  • Don’t use Slider for binary on/off settings — use Switch instead
  • Don’t omit a label — the track alone does not convey meaning