||

Range Slider

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

A spring-smoothed single-value slider with ticks and full keyboard control.

range-slider-demo

Overview

Range Slider combines a stable numeric value with a spring-smoothed visual position. Use it for bounded settings where people benefit from direct manipulation and keyboard precision.

Installation
npx honestui@latest add range-slider

Usage

 
import { RangeSlider } from "@/components/animated/range-slider"

<RangeSlider defaultValue={60} step={10} aria-label="Volume" />

Accessibility

The thumb exposes native slider semantics and supports arrow keys, Home, and End. Always provide an accessible name and show the formatted value nearby when units matter.

API Reference
PropTypeDefaultDescription
valuenumber–Controlled value.
defaultValuenumber0Initial uncontrolled value.
onValueChange(value: number) => void–Runs after a snapped value change.
minnumber0Minimum value.
maxnumber100Maximum value.
stepnumber1Value increment.
showTicksbooleantrueShows a dot for each step when there are 50 or fewer.
disabledbooleanfalseDisables pointer and keyboard input.