[Toolkit][Shadcn] Add slider recipe#3481
Conversation
|
Main example Capture.video.du.2026-04-19.11-46-16.mp4 |
|
Range example Capture.video.du.2026-04-19.12-00-30.mp4 |
|
Multiple Thumbs example Capture.video.du.2026-04-19.12-01-22.mp4 |
|
Vertical example Capture.video.du.2026-04-19.12-02-13.mp4 |
|
Disabled example Capture.video.du.2026-04-19.12-03-46.mp4 |
|
Controlled example Capture.video.du.2026-04-19.12-08-45.mp4 |
|
RTL example Capture.video.du.2026-04-19.12-30-50.mp4 |
Amoifr
force-pushed
the
feat/toolkit-shadcn-slider
branch
from
d1af4c1 to
ac78111
Compare
carsonbot
added
Feature
| import { Controller } from '@hotwired/stimulus'; | ||
|
|
||
| export default class extends Controller { | ||
| static targets = ['track', 'range', 'thumb', 'input']; |
There was a problem hiding this comment.
Can we find another naming for thumb, they call this thumbs in shadcns doc but not in their code, maybe we can call it handle like popular UI kits ( Radix, chakra ui ... )
Wdyt ?
There was a problem hiding this comment.
Thanks for raising this! I went back and forth on the naming and landed on thumb to stay aligned with shadcn upstream, which uses SliderPrimitive.Thumb and data-slot="slider-thumb". The ARIA pattern itself puts role="slider" on that element, so "thumb" is also the accessible name it inherits in assistive tech docs. Since this kit mirrors shadcn's vocabulary, I'd rather keep thumb here to avoid a one-recipe divergence. If the broader kit leans towards Radix/Chakra-style handle in the future, happy to revisit it kit-wide in one pass. WDYT? 🙏
| _isDisabled() { | ||
| return this.element.getAttribute('aria-disabled') === 'true' || this.element.matches('[data-disabled]'); | ||
| } | ||
| } |
There was a problem hiding this comment.
Maybe we should clear the event listeners in the disconnect.
There was a problem hiding this comment.
Good catch, thanks! Fixed in e1fc1e1 — using a single AbortController for the static thumb/track listeners, plus a second one scoped to the drag that's also aborted in disconnect(). Bonus: the inline arrow functions are now safely removable, and interrupting a drag mid-Turbo-nav no longer leaks window listeners.
| "$schema": "../../../schema-kit-recipe-v1.json", | ||
| "type": "component", | ||
| "name": "Slider", | ||
| "description": "An input that allows the user to select a value from a given range.", |
There was a problem hiding this comment.
An input where the user selects a value from within a given range.
There was a problem hiding this comment.
Much nicer wording, adopted in e1fc1e1. Thanks!
|
From the videos, it looks great. I left some minor comments |
- slider_controller.js: use AbortController to clean listeners on disconnect - manifest.json: rephrase component description
Amoifr
force-pushed
the
feat/toolkit-shadcn-slider
branch
from
8c6ba39 to
e55ce0e
Compare
Add a per-thumb `aria-label` so screen readers can distinguish thumbs in range/multi-thumb sliders. Falls back to "Slider" (single) or "Slider thumb X of Y" (multiple); customizable via the new `labels` prop (comma-separated string or array).
|
While reviewing #3483 (input-otp), @Kocal pointed out a missing per-input `aria-label`, and the same gap was hiding here on the slider thumbs: each `` had `aria-valuenow` but no label, which makes range/multi-thumb sliders confusing for screen-reader users (you hear "slider 25 / slider 50" with no way to know which is min and which is max). Just pushed a tiny a11y patch to fix that:
Force-pushed on top of the existing branch. Happy to adjust the wording or the prop name if you'd prefer something else! 🙏 |
3 participants
Adds the
sliderrecipe to the Shadcn kit.Part of the split of #3466 into one PR per component, tracking #3233.
Snapshots will be regenerated after rework.