Range

When to use it

The Range component is used for "slider" inputs, allowing users to select a value from a range by sliding a handle along a track. It is commonly used in forms or filters where a numerical input is required within a specific range.

INFO

The JS part of this component looks for the c-range class and adds the dynamic look on it (see the file components.range.js, which is bundled in the framework JS).

TIP

To override the default radius, set --range-radius. Use --range-track-radius or --range-thumb-radius when the track and thumb should differ. They fall back to --input-radius, then --surface-radius-large, and finally the legacy --radius / current range default.

What it looks like

Code examples

<input name="range" class="c-range" type="range" min="0" max="100" step="1" value="20" />