Slider
Slider is a native web component built on a styled input[type=range], giving you keyboard navigation (arrows, Home/End, PageUp/PageDown) and ARIA (role=slider) for free. Use it to let the user pick a value within a continuous range, such as volume, brightness, or price. It mirrors the value back into the host attribute and exposes the .value property, plus it emits input and change events.
Preview
<label for="volume" style="display:block;margin-bottom:.5rem;font-size:.875rem">Volume</label>
<pura-slider id="volume" min="0" max="100" step="1" value="60" show-value aria-label="Volume"></pura-slider>
<script type="module">
const slider = document.getElementById("volume");
slider.addEventListener("change", (e) => {
console.log("New value:", e.detail.value);
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
min | number | 0 | Minimum value of the range. |
max | number | 100 | Maximum value of the range. |
step | number | 1 | Increment between allowed values. |
value | number | (midpoint of min/max) | Current value; mirrored back into the attribute and available via the .value property. |
disabled | boolean | false | Disables interaction with the slider. |
show-value | boolean | false | Shows a bubble with the current value following the thumb. |
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/slider.js"></script>import "./pura/lib/slider.js";