Slider

The Slider component is a intuitive UI element that allows users to select a value within a defined set of allowed values. It adheres to the ARIA design pattern and supports smooth interaction through mouse, touch and keyboard inputs, offering both controlled and uncontrolled modes.

Can be controlled or uncontrolled

Updates value by touch or click on track

Full keyboard navigation

Architecture

so-slider

Reference

  • Slider

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

    • Attributes

      • aria-label
        string
        /
        default: -

        Accessible label for the slider component.

      • 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-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