👉 Slider

<label>
    <small><b>Slider:</b></small>
    <div>
        <img alt="md/remove" loading="lazy" src="/img/icons/md/remove.svg" width="18" height="18">        <input type="range" max="10" step="1">
        <img alt="md/add" loading="lazy" src="/img/icons/md/add.svg" width="18" height="18">    </div>
    <i>Helper text</i>
</label>
<label>
    <small><b>Disabled slider:</b></small>
    <div>
        <img alt="md/volume_down" loading="lazy" src="/img/icons/md/volume_down.svg" width="18" height="18">        <input type="range" max="10" step="1" aria-invalid="true" disabled>
        <img alt="md/volume_up" loading="lazy" src="/img/icons/md/volume_up.svg" width="18" height="18">    </div>
    <i>Error text</i>
</label>

Slider:

Helper text

Disabled slider:

Error text