twbs / bootstrap
96%

LAST BUILD BRANCH: v6-dev
DEFAULT BRANCH: main
Repo Added
Files 33
Badge
Embed ▾
README BADGES
x

If you need to use a raster PNG badge, change the '.svg' to '.png' in the link

Markdown

Textile

RDoc

HTML

Rst

LAST BUILD ON BRANCH v6-dev
branch: SELECT
CHANGE BRANCH
x

coverage: 94.299% (-0.1%) from 94.424%
27972799100

push

github

web-flow 
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)

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

Relevant lines Covered
3092 RELEVANT LINES 2971 COVERED LINES
237.15 HITS PER LINE
Source Files on main

Recent builds

Builds Branch Commit Type Ran Committer Via Coverage
27972799100 v6-dev 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-br... push web-flow github
94.3
27932439267 mdo/a11y-screenreader-fix Merge 5bc32e4c3 into 6381aa547 Pull #42539 web-flow github
94.38
27931525419 mdo/customize-range-input Merge 94997f8dc into 6381aa547 Pull #42525 web-flow github
94.3
27894285731 mdo/customize-range-input Merge 88b7243bb into 6381aa547 Pull #42525 web-flow github
94.25
27894121654 v6-dev Menus: support nested toggles and fix submenu position flash (#42533) * fix that * update push web-flow github
94.42
27894068439 mdo/review-bootstrap-pr-41037 Merge 06c8cf872 into be60e6a49 Pull #42533 web-flow github
94.38
27893974507 v6-dev feat(a11y): use list-style-type "" instead of list-style none (#42526) In Safari, "list-style: none" removes the list semantic role, so lists are no longer announced by screen readers. Using "list-style-type: \"\"" keeps the same visual result wh... push web-flow github
94.43
27883800188 mdo/review-bootstrap-pr-41037 Merge 7a3fb969e into b3fd1b9a5 Pull #42533 web-flow github
94.42
27883689296 v6-dev Drop deprecated `.card-link` remaining usage (#42529) push web-flow github
94.43
27883682717 v6-dev Docs: remove mentions of deprecated `.btn-primary` and `.btn-success` (#42535) push web-flow github
94.33
See All Builds (40247)