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:

Code Snippets

HTML snippet

              
              

                
              

                
Value:

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
Previous Next