v0.13.0

Appearance

Slider <l-slider> ​

Sliders let users pick a numeric value — or a min–max range — by dragging a thumb along a track.

HTML tag<l-slider>
⏣Native
⬡Progressive
◇Plain
⬢Shadow-DOM
Shadow-DOM Custom Element
html
<l-slider
  label="Volume"
  min="0"
  max="100"
  value="40"
  name="volume"
></l-slider>

Options ​

Basic ​

Set value (and optionally min, max, step). label gives the thumb its accessible name.

Code
html
<div class="w-64">
  <l-slider
    label="Volume"
    value="40"
    name="volume"
  ></l-slider>
</div>

Range ​

Add range and set min-value / max-value for a two-thumb min–max selection. The thumbs cannot cross.

Code
html
<div class="w-64">
  <l-slider
    label="Price"
    range
    min-value="20"
    max-value="70"
    name="price"
  ></l-slider>
</div>

Sizes ​

Set size to xs, sm, md (default), lg, or xl.

Code
html
<div class="flex flex-col gap-4 w-64">
  <l-slider
    size="xs"
    label="Extra small"
    value="40"
  ></l-slider>
  <l-slider
    size="sm"
    label="Small"
    value="40"
  ></l-slider>
  <l-slider
    size="md"
    label="Medium"
    value="40"
  ></l-slider>
  <l-slider
    size="lg"
    label="Large"
    value="40"
  ></l-slider>
  <l-slider
    size="xl"
    label="Extra large"
    value="40"
  ></l-slider>
</div>

Custom colors ​

Override --indicator-color (and --track-color, --thumb-color).

Code
html
<div class="w-64">
  <l-slider
    label="Storage used"
    value="65"
    style="--indicator-color: var(--l-color-bg-fill-success-strong)"
  ></l-slider>
</div>

Vertical ​

Set orientation="vertical" for a vertical slider (it increases upward). Override --length to change its height.

Code
html
<div class="flex gap-10">
  <l-slider
    label="Volume"
    orientation="vertical"
    value="40"
  ></l-slider>
  <l-slider
    label="Price"
    orientation="vertical"
    range
    min-value="20"
    max-value="70"
    with-tooltip
  ></l-slider>
</div>

With tooltip ​

Add with-tooltip to show the current value above a thumb while it's focused or dragged. Assign the valueFormatter property — (value) => string — to add a unit or currency (it also sets aria-valuetext).

Code
html
<div class="flex flex-col gap-6 w-64">
  <l-slider
    label="Volume"
    value="40"
    with-tooltip
  ></l-slider>
  <l-slider
    label="Price"
    range
    min-value="20"
    max-value="70"
    with-tooltip
  ></l-slider>
</div>

Disabled ​

Native disabled attribute.

Code
html
<div class="w-64">
  <l-slider
    label="Volume"
    value="40"
    disabled
  ></l-slider>
</div>

Not defined ​

Before the custom element upgrades (:not(:defined)), <l-slider> paints a static rail with a faint fill at its reserved height — so it reads as a slider at rest with no flash or layout shift on hydration. Override the shipped l-slider:not(:defined) rule to customize it.

Once upgraded, the shadow root renders the interactive track and thumbs.

Accessibility ​

Criteria ​

Role

Each thumb is a role="slider" with aria-valuemin / aria-valuemax / aria-valuenow

WCAG4.1.2
RGAA11.1
Accessible name

Set label; in range mode each thumb is suffixed Minimum / Maximum

WCAG1.3.1
RGAA11.1
Target size

Each thumb exposes a ≥24×24px hit area

WCAG2.5.8
Focus

Focused thumb shows a focus ring via :focus-visible

WCAG2.4.7
RGAA10.7

Keyboard interactions ​

Tab
Moves focus to the next thumb
ArrowRight / ArrowUp
Increases the value by one step
ArrowLeft / ArrowDown
Decreases the value by one step
Page Up / Page Down
Increases / decreases by a larger step
Home / End
Jumps to the minimum / maximum value

API reference ​

Importing ​

js
import 'luxen-ui/slider';

Attributes & Properties ​

minnumberdefault:0Property
Minimum value.
maxnumberdefault:100Property
Maximum value.
stepnumberdefault:1Property
Step increment.
valuenumberdefault:0Property
Single-thumb value.
rangebooleandefault:falseProperty
Enable a two-thumb min–max range.
min-valuenumberdefault:0Property
Lower value (range mode).
max-valuenumberdefault:100Property
Upper value (range mode).
labelstringProperty
Accessible label for the slider (and base for the range thumbs' names).
sizeSliderSizedefault:'md'Property
Control size.
orientationSliderOrientationdefault:'horizontal'Property
Layout axis. Vertical sliders increase upward.
with-tooltipbooleandefault:falseProperty
Show a tooltip with the current value while a thumb is focused or dragged.
valueFormatter(value: number) => string | undefinedProperty
Formats a value for the tooltip and the aria-valuetext announcement. Assign a function (value: number) => string, e.g. to add a unit or currency.
valuesnumber[]Property
Current thumb values, low to high.

Events ​

inputEvent
Fired continuously while a thumb moves. Bubbles. Not cancelable. Properties: value: number, values: number[].
changeEvent
Fired when a thumb is released. Bubbles. Not cancelable. Properties: value: number, values: number[].

CSS parts ​

basePart
The slider container.
trackPart
The full-width rail.
indicatorPart
The filled portion of the rail.
thumbPart
Each draggable thumb.
tooltipPart
The value tooltip shown above a thumb when with-tooltip is set.

CSS custom properties ​

--track-sizeCustom property
Thickness of the rail.
--thumb-sizeCustom property
Diameter of each thumb.
--track-colorCustom property
Color of the unfilled rail.
--indicator-colorCustom property
Color of the filled portion.
--thumb-colorCustom property
Background color of the thumbs.