range.md

layout	title	description	group	aliases	toc
docs	Range	Use our custom range inputs for consistent cross-browser styling and built-in customization.	forms	/docs/forms/range/	true

Overview

Create custom <input type="range"> controls with .form-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers.

{{< callout warning >}}

Progressive enhancement

Only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress — so Edge, Chrome and Safari won’t show it, and it's perfectly fine. {{< /callout >}}

{{< example >}} Example range {{< /example >}}

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.

{{< example >}} Disabled range {{< /example >}}

Min and max

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

{{< example >}} Example range {{< /example >}}

Steps

By default, range inputs "snap" to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

{{< example >}} Example range {{< /example >}}

Usability

For better usability, it is recommended most of the time to display the current selected value.

This requires extra JavaScript code.

{{< example >}}

Example range

<script> // Please note that this script is only an example, please adapt it to your needs function updateLabelValue() { document.querySelector(`output[for="${this.id}"]`).innerHTML = this.value; } window.addEventListener('load', function () { Array.from(document.getElementsByClassName('form-range')).forEach(function (el) { if (document.querySelector(`output[for="${el.id}"]`)) { el.addEventListener('input', updateLabelValue) updateLabelValue.call(el) } }) }) </script>

{{< /example >}}

CSS

Sass variables

{{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}}