Skip to content

fix(slider): add thumbLabels prop for multi-thumb accessibility#10249

Open
greencookie-afk wants to merge 1 commit intoshadcn-ui:canaryfrom
greencookie-afk:fix/slider-a11y
Open

fix(slider): add thumbLabels prop for multi-thumb accessibility#10249
greencookie-afk wants to merge 1 commit intoshadcn-ui:canaryfrom
greencookie-afk:fix/slider-a11y

Conversation

@greencookie-afk
Copy link
Copy Markdown

Summary

Add optional thumbLabels prop to the Slider component for accessible multi-thumb sliders.

Problem

Multi-thumb sliders (e.g., price range filters) have no way to distinguish thumbs for screen readers. This violates WAI-ARIA requirements.

Solution

  • Added optional thumbLabels?: string[] prop
  • Each thumb receives aria-label={thumbLabels?.[index]}
  • Fully backward compatible

Usage

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

// Regular slider - unchanged
<Slider defaultValue={[50]} />

Fixes #10221

Add optional thumbLabels array prop to Slider component to provide
distinct accessible names for each thumb in multi-thumb sliders.

Each thumb receives aria-label={thumbLabels?.[index]} enabling
screen reader users to distinguish between minimum and maximum
value controls in range sliders.

Fixes shadcn-ui#10221
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 31, 2026

Someone is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant