Skip to main content
PROYECTOVIVIANA

Slider

A range input with a draggable thumb. Supports keyboard navigation, number formatting, custom ranges, and step values.

Import

import { Slider } from '@proyecto-viviana/solid-spectrum';

Basic Usage

A controlled slider with a label and current value display.

50

Value: 50

const [volume, setVolume] = createSignal(50);

<Slider label="Volume" value={volume()} onChange={setVolume} />

Sizes

Three track/thumb sizes.

40
60
80
<Slider label="Small" defaultValue={40} size="sm" />
<Slider label="Medium" defaultValue={60} size="md" />
<Slider label="Large" defaultValue={80} size="lg" />

Variants

Default and accent color variants.

50
70
<Slider label="Default" defaultValue={50} variant="default" />
<Slider label="Accent" defaultValue={70} variant="accent" />

Custom Range and Step

Set min, max, and step to control the allowed values.

22
1630
3
15
<Slider
  label="Temperature (°C)"
  defaultValue={22}
  minValue={16}
  maxValue={30}
  step={0.5}
  showMinMax
/>

With Number Formatting

Display values in currency or percent format.

$500.00
2,500%
<Slider
  label="Price"
  defaultValue={500}
  minValue={0}
  maxValue={1000}
  step={50}
  formatOptions={{ style: 'currency', currency: 'USD' }}
/>

Disabled

A disabled slider cannot be interacted with.

50
<Slider label="Disabled" defaultValue={50} isDisabled />

Props

PropTypeDefaultDescription
labelstring—Visible label
valuenumber—Controlled value
defaultValuenumber—Uncontrolled initial value
onChange(value: number) => void—Called when the value changes
minValuenumber0Minimum allowed value
maxValuenumber100Maximum allowed value
stepnumber1Step increment
size'sm' | 'md' | 'lg''md'Track/thumb size
variant'default' | 'accent''default'Color variant
formatOptionsIntl.NumberFormatOptions—Number formatting (currency, percent, etc.)
isDisabledbooleanfalsePrevents interaction
showOutputbooleantrueShows current value label
showMinMaxbooleanfalseShows min/max labels at track ends

Accessibility

  • Keyboard: Arrow keys adjust by one step, Page Up/Down by 10%, Home/End go to min/max
  • Value is announced to screen readers via aria-valuetext
  • Formatted values (currency, percent) are properly announced
  • Disabled state communicated via aria-disabled