Range Slider Inline

Installation

pnpm dlx shadcn@latest add @paneui/range-slider-inline

Usage

import { RangeSliderInline } from "@/components/ui/range-slider-inline"

<RangeSliderInline label="Volume" defaultValue={64} />

Examples

Stops

Custom Range and Format

Use for units such as prices or percentages.

Controlled

Disabled

Motion

Clicked or keyed values ease over 300ms, and drags track the pointer directly. The thumb fades out while it crosses the label or readout. With reduced motion everything moves instantly.

For a plain single or two-thumb slider, use Slider.

API Reference

Built on the Slider primitive. Only the props this library adds or changes are listed; everything else passes through.

RangeSliderInline

A raised fill inside an inset well, with the label and value printed on the track. Single value only. Also accepts every prop of Slider.Root.

value: number; Controlled value.
defaultValue= min: number; Initial value when uncontrolled.
onValueChange: (value: number, details: Slider.Root.ChangeEventDetails) => void; Called on every change, with a single number rather than an array.
min= 0: number; Lowest value.
max= 100: number; Highest value.
step= 1: number; Value granularity.
label*: string; Text inside the left edge of the well. Also the thumb's accessible name.
formatValue= String: (value: number) => string; Formats the readout and the announced value.
showStops= true: boolean; Paint ten evenly spaced stop markers.
snapToStops= false: boolean; When a drag or track press ends, settle onto the nearest of the ten stops.

Prop	Type	Default	Description
value	number	—	Controlled value.
defaultValue	number	min	Initial value when uncontrolled.
onValueChange	(value: number, details: Slider.Root.ChangeEventDetails) => void	—	Called on every change, with a single number rather than an array.
min	number	0	Lowest value.
max	number	100	Highest value.
step	number	1	Value granularity.
label*	string	—	Text inside the left edge of the well. Also the thumb's accessible name.
formatValue	(value: number) => string	String	Formats the readout and the announced value.
showStops	boolean	true	Paint ten evenly spaced stop markers.
snapToStops	boolean	false	When a drag or track press ends, settle onto the nearest of the ten stops.

data-dragging: Present on the root while dragging.
data-disabled: Present when disabled.

Data attribute	Description
data-dragging	Present on the root while dragging.
data-disabled	Present when disabled.