[a11y]: Slider thumbs lack aria-label, making multi-thumb range sliders inaccessible

Description

In both the Base UI and Radix implementations, Slider thumb elements are rendered in a loop with no aria-label, aria-labelledby, or aria-valuetext:

{Array.from({ length: _values.length }, (_, index) => (
  <SliderPrimitive.Thumb
    data-slot="slider-thumb"
    key={index}
    className="cn-slider-thumb ..."
  />
))}

Impact

When a developer uses the Slider as a range selector (e.g., price filter with min/max), both thumbs announce identically to screen readers. There is no way for a screen reader user to tell which thumb controls the minimum vs. the maximum value.

The WAI-ARIA Slider pattern explicitly states that each thumb in a multi-thumb slider must have a distinct accessible name.

Additionally, there is no mechanism to provide aria-valuetext for cases where the numeric value alone is not meaningful (e.g., a slider from 0-100 that maps to "Low / Medium / High", or a price slider that should announce "$50").

Suggested Fix

Accept an optional thumbLabels array prop:

<Slider defaultValue={[25, 75]} thumbLabels={["Minimum price", "Maximum price"]} />

Each SliderPrimitive.Thumb in the loop receives aria-label={thumbLabels?.[index]}. A formatValue callback could also be accepted for aria-valuetext.

Files Affected

• apps/v4/registry/bases/base/ui/slider.tsx
• apps/v4/registry/bases/radix/ui/slider.tsx