twbs / bootstrap / 27972799100

94%

main: 96%

Build Type

push

github

Committed by web-flow

Commit Message

Add Range plugin for track fill, value bubble, and tick marks (#42525)

* Add Range plugin for track fill, value bubble, and tick marks

Adds an opt-in JavaScript plugin (`data-bs-range`) that enhances
`<input type="range">`. A consistent cross-browser fill can't be done
with pseudo-elements alone (only Firefox has `::-moz-range-progress`),
so the plugin publishes the current value as a `--bs-range-value`
custom property that the track gradient consumes.

- Fill: colored track up to the thumb, themeable via `--range-fill-bg`
- Value bubble (`data-bs-bubble`): floating value that tracks the thumb
- Tick marks (`data-bs-ticks`): generated from a linked `<datalist>`

The bubble and ticks are siblings of the input, so they don't inherit
the input's `--range-fill-bg`; the plugin copies the resolved value onto
them and the CSS falls back to `--primary-base` so they're never blank.

Plain `.form-range` inputs are untouched. Includes unit tests and docs.

* Range: anchor positioning on .form-range and rename track fill token

- Make `.form-range` the positioning context (`position: relative`) and
  drop the JS-added `.range-anchored` class; the bubble and ticks are
  siblings of the input, so they already share its offset parent.
- Rename `--range-fill-bg` to `--range-track-fill-bg` for accuracy.
- Keep SCSS custom properties unprefixed (the build adds `--bs-`) and
  have the plugin read/write the prefixed names, matching the codebase.
- Trim obvious comments.

* Bump bundlewatch JS size limits for the Range plugin

* Range: make it a JS component with a wrapper, consolidate the CSS

Restructure range as an always-JS component so the fill, value bubble,
and tick marks are driven by a single `--bs-range-fill` ratio in CSS.

- `.form-range` is now a wrapper that owns the tokens; the input takes
  `.form-range-input`. Children inherit the tokens, so the old JS color
  copying and px positioning are gone.
- The plugin only sets `--bs-range-fill` (0–1) and the bub... (continued)

Coverage Stats

1032 of 1153 branches covered (89.51%)

Branch coverage included in aggregate %.

95 of 99 new or added lines in 1 file covered. (95.96%)

1 existing line in 1 file now uncovered.

2971 of 3092 relevant lines covered (96.09%)

237.15 hits per line