Forms

Slider

Production-quality slider (range input) for selecting numeric values within a given range. Built for mission-critical applications with full WCAG 2.1 AA compliance and WAI-ARIA Slider Pattern support.

Basic Usage

Simple slider with label and value display. Uses native input type='range' for maximum accessibility.

Temperature

Controls creativity vs. consistency of responses.

With Semantic Labels

Use lowLabel and highLabel to provide meaningful context at the range boundaries instead of raw numbers.

Temperature

Controls creativity vs. consistency of responses.

With Paired Number Input

Enable showInput for precise value entry. Best practice when users need to type exact values (e.g. 22.5). Slider and input stay in sync.

Volume

Custom Format

Use formatValue to display values in a custom format (e.g. speed multiplier with 'x' suffix).

Speed

Speaking rate multiplier

Sizes

Choose sm, md (default), or lg based on context and touch targets.

Small

Value

Medium (default)

Value

Large

Value

States

Disabled, error, success, and hint states for form validation.

Disabled

Disabled Slider

With Error

Temperature

With Success

Confidence

With Hint

Volume

AI Voice Configuration Example

Real-world example: persona configuration sliders for Synthax voice AI.

Model Parameters

Temperature

Controls creativity vs. consistency of responses

Speed

Speaking rate multiplier

Props

Prop	Type	Default	Description
`id`	`string`	—	Unique identifier for the slider
`name`	`string`	—	Form field name for form submission
`label` *	`string`	—	Label text for the slider
`value`	`number`	0	Current value (bindable)
`min`	`number`	0	Minimum value
`max`	`number`	100	Maximum value
`step`	`number`	1	Step increment
`required`	`boolean`	false	Whether the field is required
`disabled`	`boolean`	false	Whether the field is disabled
`error`	`string`	—	Error message to display
`successMessage`	`string`	—	Success message when valid (shows green fill)
`hint`	`string`	—	Hint text below the slider (shows info icon next to label)
`description`	`string`	—	Description text below the label
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Size of the slider
`hideLabel`	`boolean`	false	Hide label visually (still accessible)
`class`	`string`	—	Additional CSS classes for the wrapper
`lowLabel`	`string`	—	Semantic label for the low end (e.g. "Consistent")
`highLabel`	`string`	—	Semantic label for the high end (e.g. "Creative")
`formatValue`	`(value: number) => string`	—	Format function for displayed value
`ariaValueText`	`(value: number) => string`	—	Human-readable value for screen readers
`showInput`	`boolean`	false	Show paired number input for precise value entry
`alwaysShowFooter`	`boolean`	false	Always render footer to prevent layout shift
`validateOnMount`	`boolean`	false	Show validation state immediately
`onchange`	`(value: number) => void`	—	Change handler
`onblur`	`(event: FocusEvent) => void`	—	Blur handler
`testId`	`string`	—	Test ID for e2e testing (Playwright, Cypress)

Slider Best Practices

Native Input: Uses <input type="range"> for built-in keyboard support (Arrow keys, Home, End).
Semantic Labels: Use lowLabel and highLabel when raw numbers aren't meaningful (e.g. "Consistent" / "Creative").
Paired Input: Enable showInput when users need precise value entry alongside visual adjustment.
ariaValueText: Provide human-readable descriptions for screen readers when formatValue isn't sufficient (e.g. "30 percent").
Touch Targets: Thumb is 20px (md) for comfortable touch interaction; use size="lg" for critical controls.
Validation: Use validateOnMount when showing validation state before user interaction.

Accessibility

WAI-ARIA Slider Pattern: Full aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext.
Keyboard: Arrow keys (step), Home/End (min/max), native focus ring.
Reduced Motion: Fill transition disabled for prefers-reduced-motion users.
Label Association: Proper for/id and aria-labelledby.
Light/Dark Themes: Full support via design tokens; primary-light for fill/thumb/focus in dark mode.

Usage

import { Slider } from '@synthaxai/ui'

// Basic
&lt;Slider label="Temperature" bind:value={temp} min={0} max={1} step={0.05} /&gt;

// With description and semantic labels
&lt;Slider
  label="Temperature"
  bind:value={temp}
  description="Controls creativity vs. consistency of responses."
  lowLabel="Consistent"
  highLabel="Creative"
/&gt;

// With paired number input
&lt;Slider label="Volume" bind:value={vol} min={0} max={100} showInput /&gt;