Skip to main content

Sliders

Sliders allow users to make selections from a range of values.

Sliders allow users to view and select a value (or range) from the range along a bar. They’re ideal for adjusting settings such as volume and brightness, or for applying image filters.

Sliders can use icons on both ends of the bar to represent a numeric or relative scale. The range of values or the nature of the values, such as volume change, can be communicated with icons.

Demo

volume_mute volume_up
R
<div class="d-flex justify-content-center align-items-center">
  <span class="material-icons text-black-secondary mr-3">volume_mute</span>
  <input type="range" class="custom-range" id="customRange1">
    <span class="material-icons text-black-secondary ml-3">volume_up</span>
</div>
<div class="d-flex justify-content-center align-items-center">
  <input type="range" class="custom-range" id="customRange2" value="50" min="0" max="100" oninput="customRange2Counter.value = this.value">
  <input type="number" class="form-alternative ml-3" id="customRange2Counter" value="50" min="0" max="100" oninput="customRange2.value = this.value">
</div>
<div class="d-flex justify-content-center align-items-center">
  <span class="typography-headline-6 text-black-secondary mr-3">R</span>
  <input type="range" class="custom-range" id="customRange2222" value="177" min="0" max="255" oninput="redValue.value = this.value">
  <input type="number" class="form-alternative ml-3" id="redValue" value="177" min="0" max="255" oninput="customRange2222.value = this.value">
</div>

Continuous sliders

Continuous sliders allow users to set and select a value along a subjective range.

Only continuous sliders are available with standard browser features. Design will change from one browser to another, and will look best in Firefox as webkit browsers (Chrome, Edge chromium) have poor input="range" customization.

Value label and Range values cannot be obtained using basic browser styling. You will need ion.RangeSlider plugin.

States

<label>Enabled 0%<input type="range" class="custom-range" id="range-state1" value="0"></label>
<label>Enabled 50%<input type="range" class="custom-range" id="range-state2" value="50" max="100"></label>
<label>Enabled 100%<input type="range" class="custom-range" id="range-state3" value="100" max="100"></label>
<label>Disabled 0%<input type="range" class="custom-range" id="range-state11" value="0" disabled></label>
<label>Disabled 50%<input type="range" class="custom-range" id="range-state22" value="50" max="100" disabled></label>
<label>Disabled 100%<input type="range" class="custom-range" id="range-state33" value="100" max="100" disabled></label>

Discrete sliders

Discrete sliders Tick marcks cannot be obtained using basic browser styling. You will need ion.RangeSlider plugin.