Range Input
Prefer the range input over a standard number input for easier adjustments. Usually not as precise. Display the currently selected value below or group with a number input for the best of both worlds.
Link to section titled: Component
Component
{range input value}
Range Input
- html<!-- COMPONENT-START: nc-input-field: Range -->
<div class="nc-input-field">
<label for="input" class="nc-stack">
<span class="nc-input-label">Label</span>
</label>
<div class="nc-stack full-width -nogap | nc-input-range">
<input id="input" class="nc-input" aria-required="true" autocomplete="" type="range" />
<small class="nc-hint">{range input value}</small>
</div>
</div>
<!-- COMPONENT-END: nc-input-field -->