ARIA Pattern.

<Slider.Root defaultValue={50}>
    <Slider.Output />
    <Slider.Control>
        <Slider.Track>
            <Slider.Indicator />
            <Slider.Thumb />
        </Slider.Track>
    </Slider.Control>
</Slider.Root>

Breaking Changes

• Thumbs can no longer swap positions/be dragged past each other, the related disableSwap prop has been dropped
• A new Control subcomponent is added to represent the click/touch area of the slider. Previously this component's functionality was implemented in the root, but it was introduced because Slider.Root in the new API is expected to contain the Output element and a label as well.
• The Rail component which referred to the visible bar along which the thumb can move is now renamed to be the Track
• The component representing the filled portion of the slider track is is renamed from Track to Indicator
• Thumb's internal input element is no longer exposed (it used to be via slots.input)
• The Mark component/slot, and the marks prop have been dropped
• The step prop defaults to 1 and can no longer be null.
• The ValueLabel slot/component and related features have been dropped. This design can be implemented using Tooltip as in this demo
• The restricted values feature will be redesigned, and decoupled from any props related to the visual marks: [slider] Arbitrarily restrict the possible values of the slider #412
• The isRtl prop is replaced with direction: 'ltr' | 'rtl' for consistency
• A new minStepsBetweenValues prop (default 0) is added to prevent thumb overlap
• The scale prop is deprecated

Related issues

Each of these related issues should be considered when designing and implementing this new component. When this issue is resolved, these related issues should be closed.

• [slider] Issues with adding focus-visible styles to the thumb slot #77
• [slider] Thumb shifts to the right upon clicking #76
• [Slider] track="inverted" does not work #48

Search keywords: