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.
Variants
Add c-range--small for compact forms or tool panels. It reduces the track, thumb and spacing. Colors, radius overrides and interaction states work as in the default size.
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
<label class="c-label" for="range-default">Default</label>
<input id="range-default" name="range-default" class="c-range" type="range" min="0" max="100" step="1" value="20" /><label class="c-label" for="range-small">Small</label>
<input id="range-small" name="range-small" class="c-range c-range--small" type="range" min="0" max="100" step="1" value="40" />Accessibility notes
In forced colors mode, the track and handle use visible borders in the system palette. Disabled controls use the system's disabled color, and keyboard focus remains visible.