Preview:
/*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();
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter