Slider
Sliders are used to define a particular range whose exact value is not important. Sliders can be used to control the sound in video player or filer the price in e-com website.
Simple Slider
The slider range can be set using min and
max attribute on input element .
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="slider-container">
<input type="range" min="0" max="1000" step="100" />
</div>
Slider with label
Labels can be added to the slider using the
datalist element.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="slider-container">
<input
type="range"
min="0"
max="1000"
step="100"
list="range-label"
/>
<datalist id="range-label">
<option value="0">0%</option>
<option value="100"></option>
<option value="200"></option>
<option value="300"></option>
<option value="400"></option>
<option value="500">50%</option>
<option value="600"></option>
<option value="700"></option>
<option value="800"></option>
<option value="900"></option>
<option value="1000">100%</option>
<option></option>
</datalist>
</div>
Slider with icon
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="slider-container icon-slider">
<span class="slider-icon mr-1">
<i class="fas fa-volume-up"></i>
</span>
<input type="range" min="0" max="100" />
</div>