Skip to content
Component Anatomy

    ok: build 09:27 UTC main · dd6f9f7
    Menu / Slider

    Slider

    A range input for selecting a numeric value within a defined interval. Hover a part name or the live component to explore the anatomy.

    Anatomy

    40
    Root root

    The outermost container. Sets the width context for the track and coordinates keyboard and pointer events across all child parts.

    Track track

    The horizontal rail that represents the full range of values.

    The track is a positioned container — both the range fill and the thumb are absolutely positioned relative to it. Its height and border-radius define the visual style of the slider line.

    Range range

    The filled portion of the track from the minimum to the current value.

    Its width is set inline as a percentage: width: 40%. It is purely decorative and carries pointer-events: none so clicks pass through to the track.

    Thumb thumb

    The draggable handle that represents the current value.

    Receives role="slider" and exposes aria-valuenow, aria-valuemin, and aria-valuemax for assistive technology. Keyboard interaction: ArrowLeft / ArrowRight decrement / increment the value by one step.

    Output output

    Displays the current numeric value as text.

    Uses aria-live="polite" so screen readers announce value changes without interrupting the user. Updates in sync with the thumb position.