Custom styling for range inputs

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">

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">


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