The is-slider
modifier can be used to create a clean looking horizontal slider for the range input element.
<div class="is-slider">
<input type="range">
</div>
The value
attribute can be used to set the handle’s initial position. The handle will position directly in the middle of the slider if no default value is set. The min
and max
attributes will set the minimum and maximum permitted value for the slider. the defaults being 0 and 100.
<div class="is-slider">
<input type="range" min="1" max="5" value="2">
</div>
The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.
| Variable | Type | Default Value |
|---|---|---|
| $slider-thumb-color | color | $primary |
| $slider-thumb-radius | units | 20px |
| $slider-thumb-height | units | 1.5rem |
| $slider-thumb-width | units | 1.5rem |
| $slider-track-height | units | 8.4px |
| $slider-track-background | color | #dbdbdb |