Use .c-range components to style form range inputs. Child component classes are shown below.

Since WebKit browsers have no supporting pseudo-element for the lower range, the .c-range__input child contains corresponding background CSS whose size should be manipulated via JavaScript whenever the range "thumb" is moved. Similarly, the track background for dual-thumb sliders must be maniuplated as each thumb is dragged. See the supporting page JS for details.

Hint text may also appear below the range input.

The unmodified .c-range occupies 100% of the width of its container. The following fields are contained by a 400px wrapper.

Modifiers

Use the .c-range--inline class modifier to layout range controls inline.

States

Values

Demonstrate range controls with various max, min, step, and value attribute values.

.c-range__input[value="10"]

.c-range__input[max="40"][value="10"]

.c-range__input[max="60"][min="30"][value="45"]

.c-range__input[step="5"][value="75"]

Playground

<div class="c-range u-mb"> <label class="c-range__label" for="range-playground">Standard Range Input</label> <small class="c-range__hint">Allow user to specify a numeric value using native <code class="c-code">input type="range"</code> element.</small> <input class="c-range__input" id="range-playground" type="range"> </div> <div class="c-range"> <label class="c-range__label" for="multirange-playground">Custom Range Slider</label> <small class="c-range__hint">Allow user to specify a numeric range using multiple <code class="c-code">input</code> "thumb" controls (requires JS to support draggable behaviors).</small> <div class="c-range__slider"> <div class="c-range__slider__track" style="background-position:50%; background-size:50%"> <div class="c-range__slider__track__rail"> <input class="c-range__slider__track__rail__thumb" style="left:25%" value="25" id="multirange-playground"> <input class="c-range__slider__track__rail__thumb" style="left:75%" value="75"> </div> </div> </div> </div>