Slider - Seventh UI CSS

Default

Native range inputs keep keyboard support. The visual fill is controlled with --sui-slider-fill-size until a consumer or helper syncs it to the current value.

Variants

Range

Range synchronization, collision rules, and formatted values are owned by the consuming application. CSS exposes --sui-slider-range-start and --sui-slider-range-end for the selected segment.

Behavior Notes

This component is CSS-first. The native marker moves by browser behavior, but the filled track uses --sui-slider-fill-size; the application must update that variable when the value changes.

The two-handle range example is a visual composite made from two native range inputs. A production range slider needs JavaScript to coordinate lower/upper values, selected-track variables, active handle order, pointer targeting, keyboard behavior, and collision rules.

States

Value exceeds the recommended threshold.

Theme

CSS API

<div class="sui-slider">
  <div class="sui-slider__header">
    <label class="sui-slider__label" for="volume">Volume</label>
    <span class="sui-slider__value">56%</span>
  </div>
  <div class="sui-slider__row">
    <input class="sui-slider__control" id="volume" type="range" min="0" max="100" value="56" style="--sui-slider-fill-size: 56%;">
  </div>
</div>