Slider

A native <input type="range"> styled via class + data attributes. Two variants, three sizes, color theming. Filled track works in every modern browser with zero JS.

The fill is painted differently per engine: Firefox uses the native ::-moz-range-progress pseudo; WebKit uses Ana Tudor’s box-shadow trick — a massive horizontal box-shadow on the thumb, clipped by overflow: hidden on the input. As the thumb moves, the shadow moves with it.

Install

import "elements-kit/ui/styles.css";

import "elements-kit/ui/styles/palette/gray.css";
import "elements-kit/ui/styles/neutral/gray.css";
import "elements-kit/ui/styles/palette/black-alpha.css";
import "elements-kit/ui/styles/palette/mint.css";
import "elements-kit/ui/styles/accent/mint.css";

import "elements-kit/ui/slider/slider.css";

API

<input
  type="range"
  class="unset x-slider"
  min="0"
  max="100"
  value="50"
  data-size="2"
  data-variant="surface"
/>

Attribute	Values
data-variant	surface (default), soft
data-size	1, 2 (default), 3
data-accent (on a parent or the input)	any imported color scale
disabled / data-disabled	native or attribute

Sizing

data-size	track	thumb
1	--space-2 × 0.75 (~6px)	track + --space-1 (~10px)
2 (default)	--space-2 (~8px)	track + --space-1 (~12px)
3	--space-2 × 1.25 (~10px)	track + --space-1 (~14px)

Thumb shape: border-radius: max(--radius-1, --radius-thumb) — sits flush with the page’s data-radius setting.

Variants

• surface (default) — bordered track, --neutral-a3 background, 1px --neutral-a5 border.
• soft — flat track, --neutral-a4 background, no border, thumb has tinted shadow.

Focus

:focus-visible adds a 3px --accent-3 ring + 5px --focus-8 outline around the thumb. The native track outline is suppressed.

Limitations

The kit ships a single-thumb range input.

• Slight vertical bleed of the fill — the WebKit box-shadow trick paints fill at the input’s height (= thumb height). The fill extends ~(thumb − track) / 2 px above and below the visible track. Negligible at default sizes.
• No range (X-to-Y) slider — needs two thumbs + JS. Caller composes.
• No vertical orientation — appearance: slider-vertical is inconsistent across browsers.
• No tick marks / step indicators — render your own <datalist> if needed.

Accessibility

• <input type="range"> is keyboard-accessible by default — arrow keys move by step, home/end jump to min/max.
• Pair with a <label> (wrapping or for=).
• Set aria-valuetext if the displayed value differs from the input’s raw number (e.g. “$1,200” instead of 1200).