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.

Author: mdo

js/src/range.js

@@ -36,7 +36,6 @@ const CLASS_NAME_TICK_LABEL = 'form-range-tick-label'
 // Shipped (`--bs-`-prefixed) custom properties; the build prefixes the SCSS tokens, so the
 // plugin must write the prefixed names to interoperate with the rendered CSS.
 const PROPERTY_FILL = '--bs-range-fill'
-const PROPERTY_TICK = '--bs-range-tick'
 
 const Default = {
   bubble: false, // Show a value bubble above the thumb
@@ -182,25 +181,38 @@ class Range extends BaseComponent {
     const min = this._min()
     const span = this._max() - min || 1
 
-    this._ticks = document.createElement('div')
-    this._ticks.className = CLASS_NAME_TICKS
-    this._ticks.setAttribute('aria-hidden', 'true')
-
+    const points = []
     for (const option of SelectorEngine.find('option', datalist)) {
       const value = Number.parseFloat(option.value)
 
-      if (Number.isNaN(value)) {
-        continue
+      if (!Number.isNaN(value)) {
+        points.push({ ratio: (value - min) / span, label: option.label })
       }
+    }
+
+    if (points.length === 0) {
+      return
+    }
+
+    points.sort((a, b) => a.ratio - b.ratio)
+
+    this._ticks = document.createElement('div')
+    this._ticks.className = CLASS_NAME_TICKS
+    this._ticks.setAttribute('aria-hidden', 'true')
+
+    // Columns are the gaps between 0, each tick, and 1, so every tick lands on a grid line
+    const stops = [0, ...points.map(point => point.ratio), 1]
+    this._ticks.style.gridTemplateColumns = stops.slice(1).map((stop, index) => `${stop - stops[index]}fr`).join(' ')
 
+    for (const [index, point] of points.entries()) {
       const tick = document.createElement('span')
       tick.className = CLASS_NAME_TICK
-      tick.style.setProperty(PROPERTY_TICK, `${(value - min) / span}`)
+      tick.style.gridColumnStart = `${index + 2}`
 
-      if (option.label) {
+      if (point.label) {
         const label = document.createElement('span')
         label.className = CLASS_NAME_TICK_LABEL
-        label.textContent = option.label
+        label.textContent = point.label
         tick.append(label)
       }
 

js/tests/unit/range.spec.js

@@ -185,16 +185,20 @@ describe('Range', () => {
       expect(ticks.length).toEqual(3)
     })
 
-    it('should set the --bs-range-tick ratio per tick (handles uneven values)', () => {
+    it('should place each tick on a grid line via grid-template-columns (handles uneven values)', () => {
       fixtureEl.innerHTML = getTicksHtml()
 
       const rangeEl = fixtureEl.querySelector('.form-range')
       new Range(rangeEl) // eslint-disable-line no-new
 
+      // datalist values 0/10/100 -> gaps between 0, .1, 1, and 1
+      const ticksEl = fixtureEl.querySelector('.form-range-ticks')
+      expect(ticksEl.style.gridTemplateColumns).toEqual('0fr 0.1fr 0.9fr 0fr')
+
       const ticks = fixtureEl.querySelectorAll('.form-range-tick')
-      expect(ticks[0].style.getPropertyValue('--bs-range-tick')).toEqual('0')
-      expect(ticks[1].style.getPropertyValue('--bs-range-tick')).toEqual('0.1')
-      expect(ticks[2].style.getPropertyValue('--bs-range-tick')).toEqual('1')
+      expect(ticks[0].style.gridColumnStart).toEqual('2')
+      expect(ticks[1].style.gridColumnStart).toEqual('3')
+      expect(ticks[2].style.gridColumnStart).toEqual('4')
     })
 
     it('should render labels from the option label only', () => {

scss/forms/_form-range.scss

@@ -6,6 +6,7 @@
 @use "../mixins/gradients" as *;
 @use "../mixins/tokens" as *;
 
+// stylelint-disable custom-property-no-missing-var-function
 $range-tokens: () !default;
 
 // scss-docs-start range-tokens
@@ -18,6 +19,7 @@ $range-tokens: defaults(
     --range-track-bg: var(--bg-3),
     --range-track-border-radius: 1rem,
     --range-track-fill-bg: var(--primary-base),
+    --range-track-disabled-bg: color-mix(in oklch, var(--bg-4), var(--fg-3)),
     --range-thumb-width: 1rem,
     --range-thumb-height: var(--range-thumb-width),
     --range-thumb-bg: var(--primary-base),
@@ -36,6 +38,7 @@ $range-tokens: defaults(
   $range-tokens
 );
 // scss-docs-end range-tokens
+// stylelint-enable custom-property-no-missing-var-function
 
 // scss-docs-start range-mixins
 @mixin range-thumb() {
@@ -144,6 +147,14 @@ $range-tokens: defaults(
       &::-moz-range-thumb {
         background-color: var(--range-thumb-disabled-bg);
       }
+
+      &::-webkit-slider-runnable-track {
+        --range-track-fill-bg: var(--range-track-disabled-bg);
+      }
+
+      &::-moz-range-track {
+        --range-track-fill-bg: var(--range-track-disabled-bg);
+      }
     }
   }
 
@@ -165,30 +176,34 @@ $range-tokens: defaults(
     }
   }
 
-  // Tick marks generated from the linked <datalist>. Each tick gets `--range-tick` (0–1) and is
-  // placed along the track, inset by half the thumb so the ends line up with the thumb travel.
+  // Tick marks generated from the linked <datalist>. The plugin builds `grid-template-columns`
+  // from the gaps between values so each tick lands on a grid line (handles uneven values),
+  // inset by half the thumb so the ends line up with the thumb travel.
   .form-range-ticks {
-    position: relative;
-    height: var(--range-tick-height);
+    display: grid;
+    padding-inline: calc(var(--range-thumb-width) * .5);
     margin-top: .25rem;
   }
 
   .form-range-tick {
-    position: absolute;
-    left: calc((var(--range-thumb-width) * .5) + var(--range-tick, 0) * (100% - var(--range-thumb-width)));
-    width: var(--range-tick-width);
-    height: var(--range-tick-height);
-    background-color: var(--range-tick-bg);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-self: start;
     transform: translateX(-50%);
+
+    &::before {
+      width: var(--range-tick-width);
+      height: var(--range-tick-height);
+      content: "";
+      background-color: var(--range-tick-bg);
+    }
   }
 
   .form-range-tick-label {
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    font-size: var(--font-size-xs);
-    color: var(--fg-1);
+    margin-top: .125rem;
+    font-size: var(--font-size-sm);
+    color: var(--fg-2);
     white-space: nowrap;
-    transform: translateX(-50%);
   }
 }