Slider

                
                    <div class="slider-container">
                        <input type="range" min="1" max="100" value="50" class="slider" id="slider">
                        <div class="value-container">Slider value : <div id="slider-value"></div></div>
                    </div>
                
            

                
                    const slider = document.querySelector("#slider")
                    const valueOfSlider = document.querySelector("#slider-value")
                    valueOfSlider.innerHTML = slider.value;
                    slider.addEventListener("input", ()=>{
                        valueOfSlider.innerHTML = slider.value;
                    })
                
            

               
                <div class="slider-container">
                    <input type="range" min="0" max="5" value="2" step="1" list="ticks" class="slider" id="step-slider">
                    <datalist id="ticks">
                        <option value="1"></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5"></option>
                      </datalist>
                    <div class="value-container">Slider value : <div id="step-slider-value"></div></div>
                </div>
               
           

            
                const stepSlider = document.querySelector("#step-slider")
                const valueOfStepSlider = document.querySelector("#step-slider-value")
                valueOfStepSlider.innerHTML = stepSlider.value;
                stepSlider.addEventListener("input", ()=>{
                    valueOfStepSlider.innerHTML = stepSlider.value;
                })