@rcarls/rc-range-slider 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -0
- package/dist/custom-elements.json +1088 -0
- package/dist/demo.css +85 -0
- package/dist/demo.js +40 -0
- package/dist/rc-range-slider-CL02oFwb.js +613 -0
- package/dist/rc-range-slider-CL02oFwb.js.map +1 -0
- package/dist/rc-range-slider-define.js +6 -0
- package/dist/rc-range-slider-define.js.map +1 -0
- package/dist/rc-range-slider.js +5 -0
- package/dist/rc-range-slider.js.map +1 -0
- package/dist/types/packages/rc-range-slider/src/define.d.ts +1 -0
- package/dist/types/packages/rc-range-slider/src/index.d.ts +1 -0
- package/dist/types/packages/rc-range-slider/src/rc-range-slider.d.ts +156 -0
- package/dist/types/packages/rc-range-slider/src/rc-range-slider.test.d.ts +0 -0
- package/package.json +68 -0
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# @rcarls/rc-range-slider
|
|
2
|
+
|
|
3
|
+
WAI-ARIA APG multi-thumb range slider web component with native form
|
|
4
|
+
participation.
|
|
5
|
+
|
|
6
|
+
`rc-range-slider` progressively enhances two direct child
|
|
7
|
+
`<input type="range">` elements. Before upgrade, those inputs are the usable
|
|
8
|
+
no-JavaScript fallback. After upgrade, the inputs remain in light DOM as hidden
|
|
9
|
+
form reflectors while custom shadow-DOM thumbs provide the APG slider
|
|
10
|
+
interaction surface.
|
|
11
|
+
|
|
12
|
+
```html
|
|
13
|
+
<rc-range-slider aria-label="Price range">
|
|
14
|
+
<input type="range" name="price-min" min="0" max="100" value="20" aria-label="Minimum">
|
|
15
|
+
<input type="range" name="price-max" min="0" max="100" value="80" aria-label="Maximum">
|
|
16
|
+
</rc-range-slider>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
The custom thumbs expose `role="slider"`, stable tab order, dynamic
|
|
20
|
+
`aria-valuemin` / `aria-valuemax` bounds, keyboard support, and optional
|
|
21
|
+
`aria-valuetext` through `low-value-text` and `high-value-text`. The hidden
|
|
22
|
+
native inputs keep their `name`, current `value`, and disabled state so normal
|
|
23
|
+
form submission keeps working.
|
|
24
|
+
|
|
25
|
+
## Styling Hooks
|
|
26
|
+
|
|
27
|
+
The component exposes `root`, `group`, `track`, `range`, `thumb`, `low-thumb`,
|
|
28
|
+
`high-thumb`, `value-display`, `low-value-display`, and `high-value-display`
|
|
29
|
+
CSS parts.
|
|
30
|
+
|
|
31
|
+
The selected range, thumb border, focus ring, hover, and active states use
|
|
32
|
+
`--rc-range-slider-accent`, which defaults to `var(--rc-accent, Highlight)`.
|
|
33
|
+
Set `--rc-accent` at the app or theme boundary to share one accent color across
|
|
34
|
+
components; without that token, the slider falls back to the system
|
|
35
|
+
`Highlight` color.
|
|
36
|
+
|
|
37
|
+
Consumers can decorate the track with a real named slot:
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<rc-range-slider aria-label="Price range">
|
|
41
|
+
<span slot="track-background" class="threshold-bands"></span>
|
|
42
|
+
<input type="range" name="price-min" min="0" max="100" value="20" aria-label="Minimum">
|
|
43
|
+
<input type="range" name="price-max" min="0" max="100" value="80" aria-label="Maximum">
|
|
44
|
+
</rc-range-slider>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Visual thumb styling belongs to CSS parts, not native input pseudo-elements,
|
|
48
|
+
because the upgraded interaction surface is custom shadow DOM. The fallback
|
|
49
|
+
inputs remain ordinary native range controls before the component upgrades.
|