Slider

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">
</div>
Copy

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

CSS variables

You can use the following CSS variables to customize the slider.

.is-slider {
  --thumb-color: var(--color-primary);
  --thumb-radius: 20px;
  --thumb-height: 1.5rem;
  --thumb-width: 1.5rem;
  --track-height: 8.4px;
  --track-background-color: hsl(0deg, 0%, 86%, 1);
}
Copy

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.