Slider Range

A dual-thumb slider component that allows users to select a range between two values. Provides precise control over numeric ranges through direct manipulation or keyboard input, with support for custom steps and minimum distances between thumbs.

Can be controlled or uncontrolled

Minimum distance between thumbs

Updates value by touch or click on track

Full keyboard navigation

Architecture

so-slider-range

Reference

  • Slider Range

    The range slider component. Coordinates the interaction between the two thumbs, track and provides visual feedback for different states.

    • Attributes

      • aria-label-thumb-1
        string
        /
        default: -

        Accessible label for the first slider thumb.

      • aria-label-thumb-2
        string
        /
        default: -

        Accessible label for the second slider thumb.

      • default-value
        number[]
        /
        default: -

        The value of the slider when initially rendered. Use when you do not need to control the state of the slider.

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from interacting with the slider.

      • max-value
        number
        /
        default: 100

        The maximum value for the range.

      • min-step-between-thumbs
        number
        /
        default: 0

        The minimum permitted steps between the thumbs.

      • min-value
        number
        /
        default: 0

        The minimum value for the range.

      • name
        string
        /
        default: -

        The name of the slider. Used for form submits when the slider has a parent form.

      • step
        number
        /
        default: 1

        The stepping interval.

      • value
        number[]
        /
        default: -

        The controlled value of the slider. Must be used in combination with onValueChange.

    • Events

      • onValueChange

        Event that is fired when the value changes.

      • onValueCommit

        This event is called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.

Keyboard

  • Increments the value by the step value.

  • Decrements the value by the step value.

  • Increases the value by the step amount.

  • Decreases the value by the step amount.

  • Page Up

    Increases the value by a larger step.

  • Page Down

    Decreases the value by a larger step.

  • Shift+

    Increments by a larger step value.

  • Shift+

    Decrements by a larger step value.

  • Shift+

    Increases the value by a larger step.

  • Shift+

    Decreases the value by a larger step.

  • Home

    Sets the value to its minimum.

  • End

    Sets the value to its maximum.

made for toddle