coreui / coreui-pro / 33985177498

94%

main: 94%

push

github

feat(Range): add the Range plugin with a filled track, value tooltip and datalist ticks (#1179)

* feat(Range): add the Range plugin with a filled track, value tooltip and datalist ticks

`.form-range` gains a JavaScript form of the control. Wrapping an
`<input class="form-range-input">` in `<div class="form-range">` creates a
`Range` instance that writes `--cui-range-fill` (0–1) on the wrapper; the
CSS draws the fill gradient from it, positions the value tooltip and lays
tick marks out on a grid built from the linked `<datalist>` values, so
unevenly spaced ticks need no measuring and no resize listener. Options
`tooltips` and `tooltipsFormat` follow the range slider's names; the input
fires `changed.coreui.range` with the numeric value. Every wrapper with a
range input inside initializes itself.

The bare `<input class="form-range">` keeps working unchanged as the
CSS-only form: the input rules apply to `.form-range-input, input.form-range`,
the tokens sit on `.form-range` in both cases, and the data API only picks
up `.form-range:has(> .form-range-input)`, so a legacy input gets no
instance. A static fill works without the plugin by setting
`--cui-range-fill` on the input.

The track moves from `--cui-bg-3` to a `color-mix()` halfway to `--cui-bg-2` in the range and the range
slider: `--cui-bg-3` and the `secondary` colour resolve to the same grey in
light mode, so a `theme-secondary` thumb and fill vanished against the
track. Disabled inputs override `--cui-theme-bg` on the track
pseudo-element, so a themed fill goes grey with the control.

Validation reaches both forms: `.is-invalid`/`.is-valid` colour the thumb
and its focus ring, and a feedback element after the wrapper toggles through
`:has()`.

New tokens on `.form-range`: `--cui-range-track-fill-bg`,
`--cui-range-track-disabled-bg`, `--cui-range-tick-{width,height,bg}` and
`--cui-range-tick-label-{margin-top,font-size,color}`.

Bundlewatch ceilings raised for the new plugin and rules: coreui.... (continued)

4869 of 5472 branches covered (88.98%)

Branch coverage included in aggregate %.

107 of 109 new or added lines in 1 file covered. (98.17%)

9375 of 9776 relevant lines covered (95.9%)

397.6 hits per line