Slider

Regular Slider

Example:


<div style="display: grid; grid-template-row: 1fr 1fr; grid-gap: 2em">
    <adw-slider
        min="0"
        max="100"
        value="50"
        step="5"
        onchange="document.querySelector('#slider-value').innerText = event.target.value">
    </adw-slider>
    <span class="text">
        Current value:
        <span id="slider-value">50</span>
    </span>
</div>

Result:

Current value: 50
Disabled Slider

Example:


<adw-slider min="0" max="100" value="50" step="1" disabled></adw-slider>

Result: