Range

Drag a handle to select a numeric value

The range slider is horizontal and has a single handle that can be moved with the mouse, finger or by using the arrow keys once in focus.

Usage#

The range slider uses the default HTML5 tag:

<input type="range" min="1" max="100" value="50" data-range />

It comes with preset attributes min,max and value but you can customize them as you prefer.

Customization#

The range slider comes with two different layouts: default and rounded.

You can switch to the secondo one by adding the rounded value to data-range attribute (see the example above).

If you want to create your own style, use the variables.

Variables#

This is the list of variables related to this component. You can customize the design by changing or overriding these values:

	--range-thumb-color: var(--cssui-primary);
	--range-thumb-height: 25px;
	--range-thumb-width: 25px; 
	--range-track-height: auto;
	--range-track-color: var(--cssui-gray-light);