Slider
The range slider is an element that lets the user specify a numeric value between a minimum and maximum value that is set.
Usage
Place the Slider within a form element setting the min and max attribute. By default the slider step will change the value by 1 along the slider, to change this add the step attribute giving any positive value.
NOTE: The block slider requires JavaScript to work on Chrome browsers to show the blue progress line.
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-form__control |
Default form Slider. |
slb-form__control-block |
Block form slider. |
.slb-form__control - Default Progress Slider.
.slb-form__control-block - Alternative Progress Slider.
forms\range-input.hbs
<form>
<div class="slb-form__group">
<input type="range" min="0" max="100" step="0.5" class="[modifier class]" id="exampleInputText-[modifier class]" />
<label class="slb-form__label" for="exampleInputText-[modifier class]">Range Slider Label</label>
</div>
</form>
Source:
components/forms/_form-control-range.scss