Range
<o-range> is a circular range slider: two handles on one ring pick a start and an end, numbers or times of day.
The dial is a whole day, so the band wraps through midnight. The track and the band are two interactive <o-arc>s on orbit-12: the band's ring takes the start as its --o-from and the span as its value. Each handle is a satellite on the same lane, placed by its angle, and the hours are satellites spread around an inner ring.
Numbers
Without mode, the range is a pair of numbers between min and max on a 270° arc, and the end never comes before the start. The middle shows the span, formatted like any kit readout.
Attributes
| Attribute | Default | What it does |
|---|---|---|
start / end | 22:00 / 06:00, or a quarter / three quarters of the range | The two values: HH:MM in time mode, numbers otherwise. They are also the default a form reset returns to; the attributes follow the handles. |
mode | numbers | time makes the dial a 24-hour day, in minutes. |
hours | from the locale | 12 or 24: how times read, 10:30 PM or 22:30. The value is always 24-hour. |
min / max | 0 / 100 | The range of a number dial. See Shared options. |
step | 1, or 5 minutes | Snapping grid for handles and keys. any turns it off. |
wrap | on for time | A number dial that goes round, like hues or angles: the start can come after the end. |
min-span / max-span | one step / the whole dial | Limits for the span, in values (minutes in time mode, or h:mm). A handle pushed past a limit carries the other one along. |
range / from | 270 / auto | Arc span and start angle of a number dial that does not wrap. |
label | A caption under the span. It is also the accessible name of the group. | |
start-label / end-label | Start / End | Accessible names of the handles. |
start-icon / end-icon | moon, sun, bell, a short text or a small inline SVG. | |
ticks | 48 / 40 | Marks around the inside of the band; 0 hides them. |
numbers | 12 / 4 / 5 | Labels on the dial; 0 hides them. |
fill / track | #4fd1c5 / #1f2630 | Band and track colors. |
thickness | 2.4 | Band thickness in lanes. The handles follow it. |
name | Field name: the range submits start-end with the form. See Forms. | |
disabled | off | Dimmed, out of the tab order and not submitted. A disabled <fieldset> does the same. |
size | 280px | Width of the widget. |
glow | off | A glow in the band color. |
format, decimals, currency, unit, locale | Number format of a number dial. See Shared options. | |
theme | dark, light or glass. See Shared options. |
Properties and events
| Name | What it does |
|---|---|
value | "22:30-06:45" or "20-80". Setting it (also as [start, end]) fires no event. |
start, end | One end each: "22:30" in time mode, a number otherwise. |
span | The distance from start to end, in values (minutes in time mode). Read only. |
form, labels, defaultValue, validity | As on a native input. |
formatter | A function that writes the numbers. It also gets kind: 'span' for the readout in the middle. |
input | Fires on every change you make. event.detail has value, start, end and span. |
change | Fires once a drag ends with a different value, and on each key press. |
sleep.addEventListener('change', (e) => save(e.detail.start, e.detail.end))
sleep.value = '23:00-07:00'Styling
| Property | Default | What it does |
|---|---|---|
--ok-fill | #4fd1c5 | Band, and the icons on the handles. |
--ok-track | #1f2630 | Track. |
--ok-range-handle | --ok-surface | Handle color. |
--ok-range-icon | --ok-fill | Icon color. |
--ok-tick | currentColor | Dial marks. |
--ok-focus | #3da9fc | Focus ring of a handle. |
--ok-font-size | 8cqmin | Base font size, as a share of the widget. |
More examples
Opening hours with limits
A 24-hour clock with a 15-minute step, at least two hours and at most twelve.
Hues that go round
With wrap, a number dial is a circle too: here a band of hues from magenta to orange.
Light, in a form
Accessibility
The range is a role="group" named by label (or “Time range” / “Range”), with two handles that are each a role="slider" and a tab stop, named by start-label and end-label. Each has aria-valuenow, aria-valuemin, aria-valuemax and an aria-valuetext that reads the time or number and the span, like “22:30, span 8 h 15 min”.
Arrow keys move the focused handle one step, Page Up and Page Down ten steps (an hour in time mode), Home and End go to the ends. Shift with an arrow moves both handles. A handle pushed past min-span or max-span carries the other one, so keys never get stuck.