slider

PHOTO EMBED

Sun Apr 17 2022 03:39:27 GMT+0000 (UTC)

Saved by @realsantosm #css

/*HTML CODE*/

<input class="slider m-b-1" 
type="range" min="0" 
max="100" step="1" 
value="40" />

  
  
  
  
  
 /* JavaScript */
  

const slider = document.querySelector(".slider");

slider.addEventListener("input", () => {
updateSlider();
});

const updateSlider = function () {
const backgroundPercentage =
((slider.value - slider.min) / (slider.max - slider.min)) * 100;
const backgroundColor = `linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) ${backgroundPercentage}%, var(--success-light) ${backgroundPercentage}%, var(--success-light) 100%)`;
slider.style.background = backgroundColor;
};

updateSlider();
content_copyCOPY