Slider

A value in a range, shown as it moves.

Max multiplier 40×

Volume 60%

slider.example.svelte

<script lang="ts">
  import { Slider } from '@onlywin/ui-svelte';

  let multiplier = $state(40);
</script>

<div class="example-grid">
  <Slider
    label="Max multiplier"
    min={10}
    max={100}
    step={5}
    bind:value={multiplier}
    formatValue={(value) => `${value}×`}
  />
  <Slider label="Volume" value={60} formatValue={(value) => `${value}%`} />
</div>

Usage

Do

Show the value, formatted with formatValue.

Don’t

Do not use it where an exact number matters; use Input.

Accessibility

A native range input; aria-valuetext reads the formatted value (40×, 96.50%).

Keyboard

Slider keyboard interactions
Keys	Action
`Arrow keys`	Change by one step
`Home, End`	Go to the ends

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Slider props
Prop	Type	Default	Description
`disabled`	`boolean`	`false`
`formatValue`	`(value: number) => string`	—	How the value reads next to the label and to screen readers; default the locale number.
`hint`	`string`	—
`label` *required	`string`	—
`max`	`number`	`100`
`min`	`number`	`0`
`name`	`string`	—
`onValueChange`	`(value: number) => void`	—
`step`	`number`	`1`
`value`	`number`	`50`	Bindable in Svelte; `defaultValue` in React.