Kern 0.12.0 GitHub
Forms

<kern-range>

Slider for brightness, volume or thresholds, form-associated. One handle (value is a number) or two with range (value is "from/to", the handles cannot cross). Drag or click the track; keyboard: Arrow keys ± step, Page Up/Down ± a tenth of the range, Home/End to the limits. marks adds labelled ticks.

Examples

Slider

Drag or click the track. Keyboard: arrow keys ± step, Page Up/Down ± a tenth of the range, Home/End to the limits. marks adds labelled ticks; the current value with unit is shown next to the label.

kernChange → …
<div style="display:grid;gap:24px;max-width:360px"> <kern-range name="brightness" label="Brightness" value="60" unit="%" step="5" marks="0,25,50,75,100"></kern-range> <kern-range label="Volume" value="30" disabled></kern-range> <output style="font:12px var(--font-mono);color:var(--text-muted)">kernChange → …</output> </div> root.querySelector('kern-range').addEventListener('kernChange', (e) => { root.querySelector('output').textContent = 'kernChange → ' + e.detail.value; });

Two handles

With range, value is "from/to" and the handles cannot cross. label-from and label-to name the handles for screen readers.

<div style="max-width:360px"> <kern-range name="window" label="Active between" range value="8/18" min="0" max="24" unit="h" marks="0,6,12,18,24" hint="No notifications outside this window"></kern-range> </div>

Properties

ariaLabelTextattribute aria-label-text
string | undefined

Accessible name when there is no visible label.

disabledreflectsdefault false
boolean
error
string | undefined
hint
string | undefined
label
string | undefined
labelFromattribute label-from · default From · de Von
string | undefined
labelToattribute label-to · default To · de Bis
string | undefined
locale
string | undefined

BCP 47 locale for numbers; defaults to <html lang>, then the browser language.

marksdefault ''
number[] | string

Ticks with labels, e.g. 0,25,50,75,100.

maxdefault 100
number
mindefault 0
number
name
string | undefined
rangereflectsdefault false
boolean

Two handles; value becomes "from/to".

showValueattribute show-value · default true
boolean

Show the current value next to the label.

stepdefault 1
number
unit
string | undefined

Unit after the shown value, e.g. „%“.

valuemutabledefault 0
number | string

A number, or "from/to" with range.

Events

kernChange
CustomEvent<{ value: string | number; }>

When a drag ends or a key changed the value.

kernInput
CustomEvent<{ value: string | number; }>

While dragging or on every key step.

Methods

setFocus()
setFocus() => Promise<void>

Focuses the (first) handle.

CSS parts

thumb

Each handle

track

The track