Sliders

Sliders are often the UI control of choice for letting users select a value or range from a fixed set of options. Here's a default slider with a minimum value of 1 and a maximum value of 10. Use class slider-container in the parent container and class slider in the input tag.

Optional: Use class slider-range in the parent container of the range values you wish to show and slider-value in the corresponding tag to show the slider value dynamically.

1

10

Value: 5


<!-- add class="slider-container" in the parent container, class="slider" in the input tag.
Optional: Use class "slider-range" in the parent container of the range values and "slider-value" in the corresponding tag to show the dynamic value of the slider-->

<div class="slider-container">
    <div class="slider-range">
        <p class="min-value">1</p>
        <p class="max-value">10</p>
    </div>
    <input type="range" min="1" max="10" value="5" class="slider">
    <p>Value: <span class="slider-value"></span></p>
</div>
< Ratings Snackbars >