Forms · astro-ui · Slider

Slider

Native range input themed with tokens — drag, keys, form value.

Slider wraps <input type=“range”> with token styling: the platform owns dragging, arrow keys, Home/End, and form submission. Three presentations share one API — horizontal, vertical (min at the bottom), and a radial dial — plus a two-thumb range mode. Optional tick marks, a value readout, and a tooltip bubble that rides the thumb complete it. The track fills from the minimum and mirrors in RTL.

← All components

Features

Native range input — platform drag, keys, form value
Horizontal + vertical orientations
Range mode: two thumbs, filled span
Radial dial mode (SVG arc, pointer drag)
Marks/ticks row + value readout
Thumb tooltip bubble (opt-in script, RTL-aware)
5 color variants, 3 sizes

Usage

---
import { Slider } from "astro-ui";
---

<Slider name="volume" label="Volume" value={70} showValue />
<Slider name="temp" min={16} max={30} marks={["Cold", "Warm", "Hot"]} />

Demos

Basic

Volume70

Temperature

Disabled

<Slider name="volume" label="Volume" value={70} showValue />
<Slider name="temp" label="Temperature" value={22} min={16} max={30} marks={["Cold", "Warm", "Hot"]} />
<Slider name="disabled" label="Disabled" value={40} disabled />

Thumb tooltip

{/* Bubble appears on hover, drag, and keyboard focus */}
<Slider name="brightness" label="Brightness" value={65} tooltip />

{/* Tooltip + live readout in the header */}
<Slider name="temp" label="Temperature" value={22} min={16} max={30}
  tooltip showValue />

{/* Works with marks and non-zero minimums too */}
<Slider name="zoom" label="Zoom" value={110} min={50} max={200} step={10}
  tooltip marks={["50%", "125%", "200%"]} />

Range

{/* Two thumbs bound a filled span; keyboard works on each */}
<Slider name="price" label="Price range" range value={25} valueEnd={75}
  showValue tooltip />

{/* Range with marks */}
<Slider name="budget" range value={20} valueEnd={60}
  marks={["0", "50", "100"]} />

Vertical

Level70

{/* min at the bottom; height controls the track length */}
<Slider name="level" label="Level" orientation="vertical" value={70}
  showValue />

{/* Vertical range */}
<Slider name="band" orientation="vertical" range value={30} valueEnd={70} />

Radial

Opacity

{/* SVG dial: drag the ring or use arrow keys; 12 o'clock = min */}
<Slider name="opacity" label="Opacity" radial value={33} showValue />

{/* Radial range */}
<Slider name="window" radial range value={10} valueEnd={70} showValue />

API

Props

Prop	Type	Default	Description
`name`	`string`	`—`	Field name. Range end submits as `nameEnd` (default `${name}-end`).
`value`	`number`	`50`	Initial value (range start).
`valueEnd`	`number`	`—`	Range end (range mode).
`min / max`	`number`	`0 / 100`	Bounds.
`step`	`number`	`1`	Increment.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Track direction; vertical keeps min at the bottom.
`range`	`boolean`	`false`	Two thumbs bounding a filled span.
`radial`	`boolean`	`false`	SVG dial presentation (supports range).
`height`	`string`	`"10rem"`	Track length in vertical orientation.
`marks`	`string[]`	`—`	Tick labels under the track.
`showValue`	`boolean`	`false`	Value readout.
`tooltip`	`boolean`	`false`	Value bubble above the thumb (hover/drag/focus).
`ariaStartLabel`	`string`	`—`	Accessible name for the start thumb (range).
`ariaEndLabel`	`string`	`—`	Accessible name for the end thumb (range).
`label`	`string`	`—`	Label above the track.
`variant`	`"primary" \| "success" \| "warning" \| "destructive" \| "info"`	`"primary"`	Accent color.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Scale.
`disabled`	`boolean`	`false`	Disabled state.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

Changelog

Version history mentioning Slider.

v0.1.0 — 2026-11-11

added

Forms (18): Autocomplete, Combobox, Label, Field, Input, InputGroup, Textarea, Select, Checkbox, Radio, Switch, Toggle, ToggleGroup, RadioGroup, Rating, Slider, DatePicker, TimePicker.