Slider

Sliders let users pick a numeric value or range along a track. They work well when the approximate value matters more than precise typing.

Try it

Usage

The live value property is always a number[]. The HTML attribute is comma-separated (value="50" or value="25,75"). JSX may pass a number or an array. Two numbers are range mode; variant="range" only seeds [25, 75] when value is not already a pair.

Set min, max, and step for the numeric domain. Set orientation="vertical" for a vertical track.

import { RuiSlider } from '@ecopages/radiant-ui/slider';
import { RuiField } from '@ecopages/radiant-ui/field';
import { RuiLabel } from '@ecopages/radiant-ui/label';
 
<RuiField name="volume">
  <RuiLabel>Volume</RuiLabel>
  <RuiSlider variant="single" value={50} min={0} max={100} step={1} />
</RuiField>Copy

Custom markup

<rui-slider> coordinates any light-DOM tree that matches its query contract. The RuiSlider helper stamps these targets; it is not required.

import '@ecopages/radiant-ui/slider';
 
<rui-slider value="50" min={0} max={100} label="Volume">
  <div class="rui-slider rui-slider--single" data-ref="root">
    <div class="rui-slider__header" data-ref="header">
      <span class="rui-slider__label" data-ref="label">Volume</span>
    </div>
    <div class="rui-slider__range">
      <div class="rui-slider__range-track" data-ref="rangeTrack">
        <div class="rui-slider__range-fill" />
        <button
          type="button"
          class="rui-slider__thumb"
          data-ref="singleThumb"
          data-thumb="value"
          role="slider"
        />
      </div>
    </div>
  </div>
</rui-slider>Copy

BEM classes are presentation-only. The host owns thumb aria-* and track CSS variables. Set name on the host to submit with a native form.

Range selection

Pass value={[25, 75]} for minimum/maximum filters. Set minDistance to prevent the thumbs from overlapping.

Step size and readout

Match step to meaningful increments. valuePrecision only formats the readout, tooltips, and aria-valuetext. It defaults to the decimal places in step, so a stored 0.30000000000000004 still displays as 0.3. Round committed values in application code when you need a canonical number.

<RuiSlider min={0} max={1} step={0.1} value={0.3} showValue />
 
<RuiSlider min={0} max={1} step={0.001} value={0.343} valuePrecision={2} showValue />Copy

Theming

Slider surfaces map to semantic roles, never Tailwind palette steps:

Range thumb positions come from --rui-slider-min / --rui-slider-max. The RuiSlider view seeds those inline variables (and the value readout) during SSR; the host updates them while dragging.

Unfilled track contrast is shared with knobs. Set the mix or a solid color on an ancestor:

:root {
  --rui-track-mix: 28%;
}
 
.panel {
  --rui-track-color: var(--surface-container-high);
}Copy

Override --rui-slider-track-color on rui-slider when only the slider should change.

Range mode also accepts presentation variables on rui-slider. Set track and thumb corner radii independently — they follow shape tokens such as --radius-control and --radius-container:

rui-slider {
  --rui-slider-track-radius: var(--radius-container);
  --rui-slider-thumb-radius: var(--radius-control);
}Copy

Switching the radius pack (sharp, default, soft) updates both when they reference shape tokens.

API

RuiSlider owns the light-DOM surface. Pass showValue for the default readout, valueTitle for hover tooltips, or compose a custom readout with RuiSliderValue.

Attributes

Light-DOM contract

Do not set thumb tabindex. Nested hosts: none. The RuiSlider view seeds readout text, track CSS variables, and aria-valuenow so the first paint matches the hydrated control.

Events

View helpers

CSS classes

Public BEM classes (documented via @cssclass on the element):

Theme roles

Component CSS variables

Set on rui-slider. Defaults shown; all accept any length or shape token.

Accessibility

• Sliders expose role="slider" with aria-valuenow, aria-valuemin, aria-valuemax, and a formatted aria-valuetext.
• Pair with a visible label and optionally a live value readout.
• Arrow keys adjust the value; Page Up/Down jump by larger increments.