slider

Restyled native range input with filled track.

status: stable js: consumer support: baseline

Preview

<input type="range" class="slider" min="0" max="100" value="50" style="--slider-fill: 50%">

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/slider.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add slider

Native <input type=range>; fill-track tracking needs a one-line oninput; label it

.slider .slider-sm .slider-lg

base/tokens