<bmx-slider>

<div class="row">
  <bmx-slider label="Volume" value="60" ticks="10" show-value="auto" description="Arrow keys step, Page Up and Down take a tenth of the range, Home and End go to the ends."></bmx-slider>
</div>
<div class="row">
  <bmx-slider id="ex-slider-price" label="Price range" range="true" min="0" max="5000" step="50" min-distance="250" show-value="always" description="Two role=&quot;slider&quot; elements whose announced bounds are each other, so the thumbs cannot cross."></bmx-slider>
</div>
<div class="row">
  <bmx-slider label="Rating" value="3" min="1" max="5" step="1" ticks="1" tick-labels="true" size="lg" tone="warning"></bmx-slider>
</div>
<script type="module">
  await customElements.whenDefined('bmx-slider');

  const price = document.getElementById('ex-slider-price');

  // `values` and `format` are both properties: an array and a function, neither
  // of which fits in an attribute.
  price.values = [1000, 3500];
  price.format = value => `£${value.toLocaleString('en-GB')}`;
</script>

WHY THIS ONE IS NOT A NATIVE <input type="range">

§8 says real elements rather than ARIA impersonations, and bmx-checkbox and bmx-switch both follow it. This component does not, and the reason is the range.

There is no native two-ended slider. The usual answer is two <input type="range"> elements overlaid, and it is a bad one: when both thumbs sit on the same value the one underneath cannot be grabbed at all, so the control has a state it cannot get out of, and the fix is juggling pointer-events by which half of the track the pointer is in. Shipping the single-value case on a native input and the range on something else would then mean two keyboards, two sets of styling hooks and two sets of bugs in one tag.

So both are role="slider" elements, which is the pattern WAI-ARIA documents for exactly this. What that costs is the keyboard and the drag, which the platform would otherwise have given us - so the keyboard is valueForKey in src/core/slider.ts with its own tests, and the drag uses pointer capture, which is the part only a browser can prove.

A RANGE IS TWO SLIDERS

Not one slider with two values. Each thumb is its own role="slider" with its own aria-valuenow, and their aria-valuemin and aria-valuemax bound each other - so a screen reader user arrowing the lower thumb is told where it may go, which is the information a single element with two values has nowhere to put.

The thumbs do not cross. The reasoning is in boundThumb: a values[0] that means the low end at one moment and the high end at the next hands a consumer reading it mid-drag a value belonging to the other thumb.

aria-valuetext MATTERS AS MUCH AS aria-valuenow

A price slider announcing "1200" is telling the user a number, not a price, and a rating slider announcing "3" is not saying "3 stars". format supplies the text, and it is used for the bubble and the announcement together so the two can never disagree.