Magnificent UI

Slider

Slider allows user to make a selection of a value from a range of values. 

// CSS
@import url("https://magnificentui.netlify.app/src/components/slider/slider.css");

// HTML
<link rel="stylesheet" href="https://magnificentui.netlify.app/src/components/slider/slider.css">

Standard Slider

range__slider

Price

  • 50
  • 150
  • 250
<section class="filter__section">
    <h3 class="h5 filter__head">Price</h3>
    <ul class="range__head">
        <li class="range__amount">50</li>
        <li class="range__amount">150</li>
        <li class="range__amount">250</li>
    </ul>
    <input type="range" min="500" max="2500" value="1500" class="range__slider">
</section>

Slider with Icon

range__slider range__slider--icon

Volume

  • 50
  • 150
  • 250
<section class="filter__section">
    <h3 class="h5 filter__head">Volume</h3>
    <ul class="range__head range__head--icon">
        <li class="range__amount">50</li>
        <li class="range__amount">150</li>
        <li class="range__amount">250</li>
    </ul>
    <div class="range__slider--icon">
        <i class='bx bxs-volume-full'></i>
        <input type="range" min="500" max="2500" value="1500" class="range__slider">
    </div>
</section>

Note: Used 10px as root font size.