Range Slider
Form-associated range slider with a token-driven fill gradient and live value readout. A Lit Web Component migrated from the Angular esa-range-slider.
Preview
<esa-range-slider label="Volume" value="40"></esa-range-slider>Sizes
<esa-range-slider label="Extra small" size="xs" value="15"></esa-range-slider>
<esa-range-slider label="Small" size="sm" value="25"></esa-range-slider>
<esa-range-slider label="Medium" size="md" value="50"></esa-range-slider>
<esa-range-slider label="Large" size="lg" value="75"></esa-range-slider>States
Set a custom min/max/step, hide the readout with show-value={false}, or disable the control.
<esa-range-slider label="Temperature (°F)" min="60" max="90" step="5" value="72"></esa-range-slider>
<esa-range-slider label="Hidden value" value="60" show-value="false"></esa-range-slider>
<esa-range-slider label="Disabled" value="30" disabled></esa-range-slider>API
| Prop | Type | Default | Description |
|---|---|---|---|
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
step | number | 1 | Step increment. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Track/thumb size (reflected attribute). |
label | string | '' | Field label above the track. |
show-value | boolean | true | Show the live value readout beside the track. Property: `showValue`. On by default. Write `="false"` to turn it off — unusually for a boolean attribute, this one reads the value. |
disabled | boolean | false | Disables interaction (reflected attribute). |
name | string | undefined | — | Form field name — the key this control submits under. |
value | number | 0 | Current value. |
Events
| Event | Type | Default | Description |
|---|---|---|---|
change | CustomEvent<{ value: number }> | — | Fired on input as the thumb moves. Value is a number. Composed and bubbles. |
Binding these events from Angular
Every one of these is a CustomEvent, so the payload is on
$event.detail — $event.target.value reads empty, with no
error. The names are lowercase and Angular passes them to
addEventListener verbatim, so camel-casing one means it never fires.
(change)="onChange($event.detail)"
Accessibility
- Renders a native
<input type="range">— Arrow keys step, Home/End jump to min/max, PageUp/Down move in large steps. - Carries
aria-label(falls back to "Range slider") plusaria-valuemin/aria-valuemax/aria-valuenow. - Form-associated via
ElementInternals— value submits with the enclosing form.