> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.
# Slider
> A draggable range input for selecting a numeric value or range along a track — supports single value, range, step, and disabled states.
## Overview
**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
```bash npm theme={null}
npm install @araf-ds/core
```
```bash yarn theme={null}
yarn add @araf-ds/core
```
```bash pnpm theme={null}
pnpm add @araf-ds/core
```
***
## Usage
```tsx theme={null}
import { Slider } from "@araf-ds/core"
export default function Example() {
return (
)
}
```
***
## Variants
### Basic
```tsx theme={null}
```
### With Value Display
```tsx theme={null}
```
### Range Slider
```tsx theme={null}
```
### Disabled
```tsx theme={null}
```
***
## API Reference
Controlled value(s). One element for single, two elements for range.
Uncontrolled default value.
Callback fired when the value changes while dragging.
Minimum value.
Maximum value.
Increment step between values.
Label shown above the slider.
Displays the current value next to the label.
Disables the slider.
Layout orientation. Values: `horizontal` · `vertical`
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
* 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 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