Slider
A native range input that shows its value.
The server names the level of the volume you set.
Each preview is its own Live page in a frame, because this site is a Vue 3.5 app built on the Pulsar starter kit. An open list or popover stays inside its frame; in your application it opens over the page.
Installation
suprnova live:add sliderUsage
{% import "suprnova-ui/slider/slider.html" as slider %}
{% call slider::slider("volume", value=volume) %}{% endcall %}Examples
Custom range
From 10 to 60 in steps of 10; the server describes the reminder.
Keyboard and accessibility
suprnova.slider - a native range input; the current value is shown in an output the browser keeps in sync, so the number is readable without script. value is the island's current number (FORM-009), and authority marks a server correction (Live spec 12).
API reference
slider
| Parameter | Default | Description |
|---|---|---|
name | Required | The numeric model field the range input binds. |
min | "0" | The lowest value. |
max | "100" | The highest value. |
step | "1" | The increment between values. |
value | "" | The island's current value of the field, so the control shows it. |
authority | "" | A correction sequence. When set, this render replaces the visitor's unsent edit. |