Spectre CSS

Sliders ​

JS Optional

The Sliders are for selecting values from ranges.

You can add the class tooltip to have tooltip labels, along with a JavaScript handler to update the data-tooltip attribute. If no data-tooltip is set, the value will be used instead.

html
<!-- slider -->
<input class="slider" type="range" min="0" max="100" value="50">

<!-- slider with tooltip -->
<input class="slider tooltip" 
       type="range" min="0" max="100" value="50" 
       oninput="this.setAttribute('data-tooltip', this.value)"
>