Range Slider
`<pura-range-slider>` is a range slider with two handles (minimum and maximum) over a track, with the segment between them filled. Use it when the user needs to choose a range of values, such as a price or date range, rather than just a single number. Each handle is an independent `role="slider"` with its own `aria-valuemin/max/now` and exposes its current state in `data-pura-value`, making each handle readable and operable by screen readers and agents via the keyboard (arrows, Home, End, PageUp, PageDown).
Preview
<label for="preco">Price range</label>
<pura-range-slider id="preco" aria-label="Price range"
min="0" max="1000" step="50" value-min="200" value-max="750"></pura-range-slider>
<script type="module">
import "/pura/lib/range-slider.js";
const slider = document.getElementById("preco");
slider.addEventListener("change", (e) => {
console.log("final range:", e.detail.min, e.detail.max);
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
min | number | 0 | Minimum value of the range. |
max | number | 100 | Maximum value of the range. If it is less than or equal to min, it becomes min + 1. |
step | number | 1 | Increment between values; values are snapped to the nearest step. |
value-min | number | min | Position of the lower handle. Reflected back to the host; it never exceeds value-max. |
value-max | number | max | Position of the upper handle. Reflected back to the host; it never falls below value-min. |
disabled | boolean | false | Disables pointer and keyboard interaction and removes the handles from the tab order. |
aria-label | string | "Range" | Base label used to name the handles as "<label> minimum" and "<label> maximum". |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/range-slider.js"></script>import "./pura/lib/range-slider.js";