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.


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.


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.


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);