Slider

The Slider component is a flexible and intuitive UI element designed for adjusting numerical values within a defined range. It adheres to the ARIA design pattern.

Controlled or uncontrolled mode

Multiple thumbs supported

Minimum distance between thumbs

Updates value by touch or click on track

Compatible with right-to-left layout

Full keyboard navigation

Example

Architecture

sc-slider-root
Slot: default
sc-slider-track
Slot: default
sc-slider-range
Slot: default
sc-slider-thumb-wrapper
Slot: default You must place the thumb here. Only one thumb is allowed per thumb-wrapper.
sc-slider-thumb
Slot: default

Reference

  • Root

    Contains all the parts of a slider. It will render an input for each thumb when used within a form to ensure events propagate correctly.

    • Attributes

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

      • direction
        enum
        /
        default: ltr

        The reading direction for the slider.

      • disabled
        boolean
        /
        default: false

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

      • id
        string
        /
        default: -

        ID of the slider that will be placed on its outer container. Useful for DOM manipulation.

      • inverted
        boolean
        /
        default: false

        Indicates if the slider is visually inverted.

      • max-value
        number
        /
        default: 100

        The maximum value for the range.

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

        The minimum permitted steps between multiple 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.

      • orientation
        enum
        /
        default: horizontal

        The orientation of the slider.

      • step
        number
        /
        default: 1

        The stepping interval.

      • thumbs-inside-track
        boolean
        /
        default: true

        If true, the thumbs are kept visually within the track's boundaries.

      • 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 for capturing the final value. In uncontrolled mode, it provides the committed value, while in controlled mode, it acts as a trigger.

    • Classes

      • direction-rtl

        This class is added to the container if the direction is set to rtl.

      • orientation-vertical

        Added when the orientation is set to vertical.

      • disabled

        Added when the slider is disabled.

  • Track

    The track that contains the sc-slider-range.

    • Classes

      • disabled

        Added if the slider is disabled.

  • Range

    The range part. Must be placed inside the sc-slider-track.

    • Classes

      • disabled

        Added when the slider is disabled.

  • Thumb Wrapper

    The wrapper component that holds the sc-slider-thumb.

    • Attributes

      • aria-label
        string
        /
        default: -

        Defines an accessible label for the slider thumb.

      • aria-labelled-by
        string
        /
        default: -

        References the ID of the element that labels the slider thumb.

      • aria-value-text
        string
        /
        default: -

        Provides a human-readable text alternative for the slider thumb's current value, enhancing context for assistive technologies.

      • id
        string
        /
        default: -

        ID that is placed on the outer container.

  • Thumb

    A draggable thumb. You can render multiple thumbs, each placed in a sc-slider-thumb-wrapper.

    • Classes

      • disabled

        Added when the slider is disabled.

Keyboard

  • Increments or decrements by the step value depending on orientation.

  • Increments or decrements by the step value depending on orientation.

  • 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 or decrements by a larger step value depending on orientation.

  • Shift+

    Increments or decrements by a larger step value depending on orientation.

  • 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