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 |
|---|---|---|---|
label | string | '' | Field label above the track. |
value | number | 0 | Current value. |
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). |
show-value | boolean | true | Show the live value readout beside the track. |
disabled | boolean | false | Disables interaction (reflected attribute). |
Events
| Event | Type | Default | Description |
|---|---|---|---|
change | CustomEvent<{ value: number }> | — | Fired on input as the thumb moves. Value is a number. Composed and bubbles. |
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.
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.
| Token | Tier | Resolves to |
|---|---|---|
--fill-percent | component | 0% |
--focus-ring-color | component | #65ba74 via --color-border-focus → --color-grass-8 |
--focus-ring-width | component | 2px |
--form-font-size-lg | component | clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) via --type-size-300 |
--form-font-size-md | component | clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) via --type-size-200 |
--form-font-size-sm | component | clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) via --type-size-100 |
--form-font-size-xs | component | clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) via --type-size-050 |
--color-border | semantic | #cecece via --color-gray-7 |
--color-primary | semantic | #46a758 via --color-grass-9 |
--color-surface | semantic | #fcfcfc via --color-gray-1 |
--color-text-primary | semantic | #202020 via --color-gray-12 |
--font-sans | semantic | 'DM Sans', sans-serif |
--transition-fast | semantic | 150ms ease |
--font-weight-medium | primitive | 500 |
--shadow-50 | primitive | 0 1px 4px 0 rgba(0, 0, 0, 0.03) |
--spacing-100 | primitive | 0.25rem |
--spacing-300 | primitive | 0.75rem |