Forms

Slider

Single- or two-thumb slider implementing the WAI-ARIA slider pattern for picking a value or range along a numeric scale.

import { Slider } from '@lostgradient/cinder/slider';
formnumeric
01

Overview

Drag handle input for selecting a numeric value within a bounded range.

Usage

svelte 
<script lang="ts">
  import Slider from '@lostgradient/cinder/slider';
</script>

<Slider />
Live preview
02

When to use

Use when
  • Picking a value within a continuous range where visual position communicates magnitude.
  • Selecting a low and high bound together via the range mode.
Avoid when
  • Entering a precise numeric value typed by the user — use number-input instead.
  • Displaying read-only completion — use progress instead.
03

Examples

Single-value slider

A simple slider for one numeric value. Keyboard, mouse, and touch all work.

Disabled slider

A disabled slider does not respond to keyboard or pointer input and is excluded from tab order.

Slider inside FormField

Compose `Slider` with `FormField` for label, helper text, and error wiring.

Range slider

Two thumbs constrained so the low value never exceeds the high value.

Slider with tick marks

Discrete tick marks. When `ticks` is an array, arrow keys step between adjacent ticks.

Slider with formatted value text

Use `valueText` to format the value for screen readers — percentages, currency, dates.

04

Props

Props for slider
Name Type Default Required Bindable Description
mode discriminated-union 'single' Slider mode. "single" renders one thumb and emits a scalar value; "range" renders two thumbs and emits a [low, high] tuple. Default "single".
min number 0 Minimum value. Default 0.
max number 100 Maximum value. Default 100.
value discriminated-union bind
step number 1 Step increment for arrow keys. Default 1. Must be a positive finite number.
pageStep number Step increment for Page Up/Down. Default step * 10.
label text req Visible label / accessible name for the slider. Required.
valueText (value: number) => string Formats the numeric value for aria-valuetext.
ticks boolean | number[] Optional tick marks. true renders one per step; an array snaps to those values.
disabled boolean false Disables interaction.
name text Form field name. Renders hidden inputs for form submission.
onchange discriminated-union