CSS Components / Ranges

Ranges

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.

Standard input type="range" fields are demonstrated below.

Use the following controls to manipulate the range sliders displayed below.

.c-range__hint .c-range__message
.c-range__hint
.c-range__message

Hint text may also appear below the range input.

.c-range__hint
.c-range__hint

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

Hint...
Hint...

Modifiers

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

(valid)
(valid)

States

Values

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

Playground