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 and thumb from 24px to 16px and the vertical margins from 10px to 6px. 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" />