Components

Slider

Sliders allow users to make selections from a range of values.

Basic Slider

The Slider element can be used inside a wrapper-element with slider-track class. For input component add slider class to it with min/max range.

Value: 50

Code Snippets

HTML snippet

              
              <div class="slider-track w-80p m-auto">
                <input type="range" name="slider" class="slider" min="0" max="100">
              </div>
                <div class="m-t-3">Value: <span class="output-slider-value"></span></div>

JS snippet

              
            const slider = document.querySelector(".slider");
            const output = document.querySelector(".output-slider-value");
            output.innerHTML = slider.value; // Display the default slider value

            slider.addEventListener("input", (e) => {
            output.innerHTML = e.target.value;
            });

Disabled Slider

Disabled Slider can be created by adding disabled attribute inside <input> element.

Code Snippets

HTML snippet

              
               <div class="slider-track w-80p m-auto">
                    <input type="range" name="slider" class="slider" min="0" max="100" disabled="true">
                </div>
Previous Next