]> git.ipfire.org Git - thirdparty/bootstrap.git/commit
Add Range plugin for track fill, value bubble, and tick marks (#42525)
authorMark Otto <markd.otto@gmail.com>
Mon, 22 Jun 2026 17:51:31 +0000 (10:51 -0700)
committerGitHub <noreply@github.com>
Mon, 22 Jun 2026 17:51:31 +0000 (10:51 -0700)
commitb5a618663e6dafd3bd9ce701f95fcd247388b8ce
treebb1c0c11bdcd13c6d40bc8cf9582a7808a8b8a37
parent6381aa54779a5aef718e942e6f870d19c8a6768a
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 bubble text; the
  track gradient, bubble position, and tick positions are pure CSS calc.
  Drops `_thumbWidth`, `_inheritFillColor`, the resize listener, and the
  `.range-anchored` class.
- Value bubble reuses the tooltip markup/styles instead of duplicating a
  pill and arrow. Tick marks are generated from the linked `<datalist>`
  and positioned per-value (handles uneven values); tick coloring dropped.
- Auto-inits every `.form-range`; rename fill token to
  `--range-track-fill-bg`.
- Validation moves to `.form-range-input` with a `:has()` feedback toggle.
- Add the "New" badge to the Range sidebar item and document the breaking
  changes in the migration guide.

* Range: lay out tick marks with CSS grid instead of absolute positioning

Build `grid-template-columns` from the gaps between the datalist values
so each tick lands on a grid line — this handles unevenly-spaced values
just like the old per-tick calc did, but keeps the ticks and their labels
in normal flow (the container sizes to fit the labels instead of them
overflowing an absolutely-positioned box). Inset by half the thumb so the
end ticks align with the thumb travel.

Also wraps the token map in the `custom-property-no-missing-var-function`
stylelint disable (matching _strength.scss). Includes the disabled-track
fill styling.

* Nudge bundlewatch JS limits after rebasing onto v6-dev

* fix bubble, grid, ticks, and more

* comment
.bundlewatch.config.json
js/index.js
js/src/range.js [new file with mode: 0644]
js/tests/unit/range.spec.js [new file with mode: 0644]
scss/forms/_form-range.scss
scss/forms/_validation.scss
site/data/sidebar.yml
site/src/assets/examples/cheatsheet/index.astro
site/src/content/docs/forms/range.mdx
site/src/content/docs/forms/validation.mdx
site/src/content/docs/guides/migration.mdx