coreui / coreui-pro / 33986239725

94%

main: 94%

push

github

feat(RangeSlider)!: build on the Range tokens, grid labels with ticks, datalist and tooltip modes (#1180)

* feat(RangeSlider)!: build on the Range tokens, grid labels with ticks, datalist and tooltip modes

The handles and the track read the range's tokens. `.range-slider`
declares the `--cui-range-*` family and the thumb comes from the
`form-range-thumb()` mixin, so one setting styles both controls. The
`--cui-range-slider-thumb-*` and `--cui-range-slider-track-*` families are
gone: `-thumb-*` → `--cui-range-thumb-*`, `-thumb-transition` → the three
`--cui-range-thumb-transition-*` tokens, `-track-*` → `--cui-range-track-*`,
`-track-in-range-bg` → `--cui-range-track-fill-bg`,
`-disabled-track-in-range-bg` → `--cui-range-track-disabled-bg`; the Sass
variables follow. The slider keeps `--cui-range-slider-label-*`,
`-tooltip-margin-*` and `-vertical-*`. The filled band is the theme colour
at full strength like the range's fill (it was a 50 % mix), and a disabled
slider greys the band through the theme slot on the track.

Labels sit on a grid. The plugin builds `grid-template-columns` (rows when
vertical, max at the top) from the gaps between label values, so the
labels are in normal flow: the container sizes itself, and the resize
listener, `_updateLabelsContainerSize` and the inline `left`/`bottom`
offsets are gone. Labels are sorted by value, each draws a tick from
`--cui-range-tick-*`, taller when it has text. The new `list` option reads
a `<datalist>` by id like the range does and merges its options with
`labels`.

Tooltips follow the range's modes: `tooltips: true` shows a handle's
tooltip on hover, drag and visible focus, `'always'` keeps them on. The
tooltip offset now includes the arrow height, so the arrow tip sits
`--cui-range-slider-tooltip-margin-*` from the thumb (4 px, the same as the
range) instead of 2.4 px inside it.

Docs: datalist example, tooltip modes, the shared tokens block, and the
option table names `tooltipClass` (`data-coreui... (continued)

4872 of 5475 branches covered (88.99%)

Branch coverage included in aggregate %.

39 of 39 new or added lines in 1 file covered. (100.0%)

9379 of 9779 relevant lines covered (95.91%)

396.07 hits per line