Studio
2

Slider

Installation

pnpm dlx @mielui/svelte add slider

Usage

Bindvalue to a number for a single handle. Add alabel , or usearia-label oraria-labelledby to name the control. Usearia-describedby for supporting instructions.

Setname to include the value in form submissions. Range mode submits two ordered values, which you can read withFormData.getAll . Disabled sliders are omitted. Useform to target an external form. Resetting the form restores the initial value.

id andbind:element refer to the wrapper. Style its rail, fill, and handles with thedata-ui="slider-track" ,data-ui="slider-range" , anddata-ui="slider-thumb" selectors.

import { Slider } from '$lib/mielui/components/slider';

let volume = $state(50);

<Slider bind:value={volume} label="Volume" />

Examples

Basic

With step

Range

Set range and bind a [minimum, maximum] pair. Handles stop at each other. thumbLabels names each handle for assistive technology. onValueChange receives a pair in range mode and a number in single-value mode.

Right to left

Set dir="rtl" or inherit direction from a parent. The minimum sits on the right. Values remain ordered from minimum to maximum in either direction.

Disabled

API reference

Slider

Selects a numeric value from a range.

Prop Type Default
min number | undefined 0
max number | undefined 100
step number | undefined 1
disabled boolean | undefined false
label string | undefined —
dir "ltr" | "rtl" | undefined —
id string | undefined generatedId
name string | undefined —
form string | undefined —
element Bindable HTMLDivElement | undefined —
aria-label string | undefined —
aria-labelledby string | undefined —
aria-describedby string | undefined —
class string | undefined —
children Snippet<[]> | undefined —
range false | undefined | true —
value Bindable number | undefined | [number, number] | undefined —
thumbLabels undefined | [string, string] | undefined —
onValueChange ((value: number) => void) | undefined | ((value: [number, number]) => void) | undefined —