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>import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-range-slider';
@Component({
selector: 'app-range-slider-demo',
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<esa-range-slider label="Volume" value="40"></esa-range-slider>
`,
})
export class RangeSliderDemo {}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>import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-range-slider';
@Component({
selector: 'app-range-slider-demo',
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<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>
`,
})
export class RangeSliderDemo {}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>import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-range-slider';
@Component({
selector: 'app-range-slider-demo',
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<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>
`,
})
export class RangeSliderDemo {}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.
Theming surface
Every public token this component reads, extracted from its source at build time,
split by blast radius: the hooks that belong to this component,
then the shared and system tokens it consumes alongside everything else. The
Resolves to column walks each token's real lineage —
component → semantic → primitive → raw value — so you
can see exactly where re-pointing it lands. A spoke re-skins by overriding these in
its theme-<slug>.css; component internals are never edited. No
hook for what you need? File it with /request-lego.
Type roles it names
This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.
| Role | Re-point | Reach |
|---|---|---|
.typography-label-2xs |
| +11 more componentsesa-button-toggle, esa-checkbox-group, esa-color-picker, esa-combobox, esa-date-picker, esa-form-field, esa-input-tag, esa-progress-bar, esa-radio-group, esa-text-field, esa-textarea |
.typography-label-lg |
| +12 more componentsesa-breadcrumbs, esa-button-toggle, esa-checkbox-group, esa-color-picker, esa-combobox, esa-date-picker, esa-form-field, esa-input-tag, esa-radio-group, esa-select, esa-text-field, esa-textarea |
.typography-label-md |
| +33 more componentsesa-app-bar, esa-breadcrumbs, esa-button-group, esa-button-toggle, esa-card, esa-checkbox-group, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-danger-zone, esa-date-picker, esa-dialog, esa-empty-state, esa-entity-search, esa-file-upload, esa-filter-container, esa-form-field, esa-header-nav, esa-input-tag, esa-link-column, esa-page-header, esa-pillbox, esa-popover, esa-progress-bar, esa-radio-group, esa-select, esa-side-dialog, esa-sidebar-nav, esa-stat, esa-text-field, esa-textarea, esa-tooltip |
.typography-label-xs |
| +14 more componentsesa-breadcrumbs, esa-button-toggle, esa-checkbox-group, esa-color-picker, esa-combobox, esa-date-picker, esa-entity-search, esa-form-field, esa-input-tag, esa-progress-bar, esa-radio-group, esa-select, esa-text-field, esa-textarea |
.typography-microcopy-2xs |
| +3 more componentsesa-button, esa-button-toggle, esa-pill |
.typography-microcopy-lg |
| +2 more componentsesa-button, esa-button-toggle |
.typography-microcopy-md |
| +4 more componentsesa-button, esa-button-toggle, esa-pill, esa-sidebar-nav |
.typography-microcopy-xs |
| +6 more componentsesa-app-shell, esa-button, esa-button-toggle, esa-filter-pills, esa-kbd, esa-pill |
Wired to this component
None. This component has no hooks of its own — it themes entirely through the shared tokens below, so every override here also moves its siblings.
Shared tokens it reads
Owned by a family or by the semantic layer. Still overridable — but scope the
override (esa-foo { --form-border-color: … }) unless you mean to move
everything that reads it. Reach says what else that is.
| Token | Reach | Resolves to |
|---|---|---|
--focus-ring-color | component focus ring group · +34 more | #3e9b4f via --color-border-default-focus → --color-grass-10 |
--focus-ring-offset | component focus ring group · +31 more | 2px |
--focus-ring-width | component focus ring group · +35 more | 2px via --border-width-focus → --border-width-200 |
--color-background-brand | semantic every component | #46a758 via --color-grass-9 |
--color-background-elevation-raised | semantic every component | #fcfcfc via --color-gray-1 |
--color-border-default | semantic every component | one role per property, so a theme can move the ring's weight and its colour independently. Tier 3's --focus-ring-width now reads this instead of holding a bare 2px, which is the same shape --focus-ring-color has always had (a thin tier-3 alias over a tier-2 role) — width was simply never given the tier-2 half.
*
* This role was rejected once, and the rejection is worth recording because its PREMISE was wrong rather than its reasoning. The argument against an `emphasis` width was that every 2px border in the kit is micro-geometry — spinner rings, the kbd keycap lip, a chevron. The focus ring was not in that enumeration and does not fit it: 33 components render it, more than read any other tier-3 token, and it is not micro-geometry but an accessibility affordance whose weight is a legitimate brand axis (a spoke that needs a heavier ring for contrast has to be able to reach it). It is also not a `border` in any component — every consumer paints it with `outline` or `box-shadow` — which is precisely why a survey of BORDERS missed it. The name still says `border` because tier 2 already calls the ring's colour --color-border-default-focus |
--color-content-default | semantic every component | #202020 via --color-gray-12 |
--elevation-1 | semantic every component | 0 via --shadow-offset-x |
--transition-fast | semantic every component | 150ms via --duration-150 |
--spacing-100 | primitive every component | 0.25rem |
--spacing-300 | primitive every component | 0.75rem |