mielui
Inputs

Slider

Select a value or a range with pill-shaped handles, keyboard controls and RTL support.

Installation

pnpm dlx @mielui/svelte add slider

Usage

Bind value to a number for a single handle. Name the control with label, aria-label, or aria-labelledby; the default variant does not show the label, it only names the handle. Use aria-describedby for supporting instructions. Arrow keys move one step, and holding Shift moves ten.

<script lang="ts">
    import { Slider } from '@mielui/svelte/components/slider';

    let volume = $state(50);
</script>

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

Set name to include the value in form submissions. Range mode submits two ordered values, which you can read with FormData.getAll. Disabled sliders are left out. Use form to target an external form. Resetting the form restores the initial value.

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

Examples

Value readout

A label and the current value sit above the track and follow the thumb.

Basic

With step

Field

variant="field" puts the label and the value inside the control. Drag anywhere in the bar to scrub, or focus it and use the arrow keys. A stack of fields reads as one column, which suits settings panels with many numeric values. format turns the number into the text shown on the right and announced by screen readers.

Add editable to let people click the value, or press Enter on the focused field, and type an exact number. Typed numbers snap to the step and clamp to the range. parse reads a custom format, and onValueCommit runs once when a drag ends and after each keyboard or typed change, which is the moment to save. The field variant holds one value and does not combine with range.

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 stay ordered from minimum to maximum in either direction.

Disabled

Labels

Built-in text is English by default. Pass a labels object of type SliderLabels to translate the accessible names of a range and its two thumbs, and of the value input and its edit button. value and edit receive the slider's label. thumbLabels wins over minimum and maximum. Every key is optional; omitted keys keep their default.

<script lang="ts">
    import { Slider, type SliderLabels } from '@mielui/svelte/components/slider';

    let price = $state<[number, number]>([200, 750]);

    const labels: SliderLabels = {
        range: 'Fourchette de prix',
        minimum: 'minimum',
        maximum: 'maximum'
    };
</script>

<Slider range bind:value={price} max={1000} {labels} />

API reference

Slider

Selects a numeric value from a range.

  • min
    number

    Smallest allowed value.

    Default 0

  • max
    number

    Largest allowed value.

    Default 100

  • step
    number

    Amount each step changes the value by.

    Default 1

  • disabled
    boolean

    Prevents interaction and dims the control.

    Default false

  • label
    string

    Names the handle. The field variant also shows it inside the control.

  • format
    ((value: number) => string)

    Formats a value for assistive technology and for the field variant's readout.

  • dir
    "ltr" | "rtl"

    Text direction. It flips the track for right-to-left.

  • id
    string

    Id of the element.

    Default generatedId

  • name
    string

    Field name submitted with the form.

  • form
    string

    Id of the form this control belongs to when it sits outside that form.

  • element Bindable
    HTMLDivElement

    Bindable reference to the DOM element.

  • labels
    SliderLabels

    Overrides the built-in text and accessible names. Every key is optional and English is the fallback.

  • aria-label
    string

    Accessible name when there is no visible label.

  • aria-labelledby
    string

    Id of the element that labels it.

  • aria-describedby
    string

    Id of the element that describes it.

  • class
    string

    Classes added to the element.

  • range
    false | true

    Uses two thumbs and makes value a pair.

  • variant
    SliderVariant

    field puts the label and value inside a bar you drag anywhere to scrub.

  • value Bindable
    number | [number, number]

    Current value, or a pair in range mode. Bindable.

  • thumbLabels
    [string, string]

    Accessible names of the two thumbs in range mode.

  • onValueChange
    ((value: number) => void) | ((value: [number, number]) => void)

    Called with the new value when it changes.

  • onValueCommit
    ((value: number) => void) | ((value: [number, number]) => void)

    Called once when a drag ends with a new value, and after each keyboard or typed change.

  • editable
    boolean

    Field variant only. Lets people click the value, or press Enter, and type an exact number. Typed numbers snap to step and clamp to min and max.

  • parse
    ((text: string) => number | null)

    Turns typed text into a number for editable. Return null to reject it. Defaults to the first number in the text, so units such as px are ignored.