Fylgja Range

A range lets the reader pick a value along a track, such as a volume or a price. It is the native <input type="range">, which Fylgja styles into a consistent track and thumb with a value fill, so you do not need a custom slider.

Preview

<label for="volume">Volume</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="60" />

Usage

  • Pair the <input type="range"> with a <label for>; Fylgja blocks the label above it.
  • Set min, max, and value as usual.
  • Customize the track and thumb with the --track-* and --thumb-* variables.
  • The value fill is CSS-only where scroll-driven animations are supported; fall back to setting --range-value on input for older browsers.

Accessibility

  • The <label> names the control; keyboard arrows adjust the value natively.
  • Add aria-valuetext when the raw number needs a unit or wording (for example “60 percent”).

FAQ

Does the value fill need JavaScript?

In browsers with scroll-driven animations the fill follows the thumb with CSS only. For older browsers, mirror the value into --range-value on input, for example oninput="this.style.setProperty('--range-value', this.value)".

How do I make the slider vertical?

Add the .range-vertical class from form-extend to the input.