Slider
A range input whose track is lit on the GPU.
<piix-slider>WebGL<piix-slider name="volume" value="64" suffix="%">Volume</piix-slider>
Palette
The filled part of the track glows through the palette with a slow shimmer; the head is a bright pixel block with a halo, and dragging it fast throws sparks behind it. While you drag or focus it, the value floats above the head.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just slider (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/slider.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<piix-slider name="volume" value="64" suffix="%">Volume</piix-slider>
);
}
Usage
<piix-slider name="volume" value="64" suffix="%">Volume</piix-slider>
Examples
Steps and a range
<piix-slider value="40" min="0" max="200" step="10" suffix="ms" palette="candy">Delay</piix-slider>
API reference
| Attribute | What it does | Default |
|---|---|---|
value, min, max, step | as on a range input | 50, 0, 100, 1 |
name | the form field name | – |
suffix | shown after the value | – |
palette | the colours of the light | lime |
disabled | – | – |
pixel | size of one pixel, in px | 3 |
Events
| Event | When |
|---|---|
input | while it moves |
change | when you let go, or after a key press |
Accessibility
- A real slider: arrow keys, Page Up/Down, Home and End move it.
- Screen readers hear its label, value and suffix.
- Form-associated: it submits and resets with its form.