Slider

<esp-slider>

A range slider for selecting numeric values. Built entirely from custom elements with ARIA role="slider" — no native <input type="range"> — for consistent cross-browser styling and intentional touch interaction.

On touch devices, only dragging the thumb changes the value. Tapping the track is ignored so the user can scroll the page without accidentally adjusting the slider. On desktop, clicking anywhere on the track jumps to that value and begins a drag.

The slider accepts an accessible name from two sources, checked in priority order:

Slot content — <esp-slider>Volume</esp-slider> renders a visible label and names the slider via aria-labelledby.
The label attribute — <esp-slider label="Volume"> applies an invisible aria-label when no slot content is present.

Slots

<esp-slider> has a slot:

Default

Label content displayed alongside the slider. When present, it provides the accessible name via aria-labelledby.

Attributes

<esp-slider> has the following attributes:

min

min has a default value of 0.

Minimum slider value.

max

max has a default value of 100.

Maximum slider value.

step

step has a default value of 1.

Step increment. Values snap to the nearest step.

value

value has a default value of "0".

Current slider value as a string for form compatibility. Always kept in sync with the rendered state: clamped to [min, max] and snapped to step whenever the value, min, max, or step properties change.

name

name has a default value of "".

The name used when the slider participates in a <form>.

disabled

disabled has a default value of false.

Controls whether the slider is disabled.

label

label has a default value of "".

Accessible label for the slider. Used as aria-label on the thumb when no slot content is present. When the default slot has content, aria-labelledby takes precedence and this property is ignored.

Methods

<esp-slider> has the following methods:

focus

Focus the slider thumb.

validate

Re-run constraint validation and dispatch validity-changed.

checkValidity

Check whether the current state is valid (delegates to ElementInternals).

traverseToClosest

Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.

Events

<esp-slider> emits the following events:

value-changed

value-changed is of type CustomEvent<string>.

Fired when the slider value changes. The detail is the new value as a string.

CSS Properties

<esp-slider> has the following CSS properties:

--esp-slider-track-height

Height of the slider track. Defaults to 6px.

--esp-slider-track-color

Background color of the unfilled portion of the track. Defaults to var(--esp-color-border).

--esp-slider-track-fill-color

Background color of the filled portion of the track. Defaults to var(--esp-color-action-background).

--esp-slider-track-border-radius

Border radius of the track. Defaults to calc(var(--esp-slider-track-height) / 2).

--esp-slider-thumb-size

Diameter of the thumb. Defaults to var(--esp-size-normal-to-medium).

--esp-slider-thumb-color

Fill color of the thumb. Defaults to var(--esp-color-layer-1).

--esp-slider-thumb-border-color

Border color of the thumb. Defaults to var(--esp-color-border).

--esp-slider-thumb-shadow

Box shadow of the thumb. Defaults to 0 1px 3px oklch(0 0 0 / 0.2).

--esp-slider-focus-shadow

Color of the focus ring shadow. Defaults to var(--esp-color-shadow).

--esp-field-background

Background color of the shared field shell. Defaults to var(--esp-color-layer-2).

--esp-field-border-color

Border color of the shared field shell. Defaults to var(--esp-color-border).

--esp-field-border-width

Border width of the shared field shell. Defaults to 1px.

--esp-field-text-color

Text color used inside the shared field shell. Defaults to var(--esp-color-text).

--esp-field-hover-bg

Hover background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-bg

Focus background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-shadow

Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).