How To Add Css To -webkit-slider-runnable-track Using Javascript

I am trying to change the range slider lower color depends upon the slide. Using below code.

Solution 1:

This is working now. Here is the update I made to Javascript

$(function() {
var style = $("<style>", {type:"text/css"}).appendTo("head");
  $('input[type="range"]').on('input change', function() {

    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
 $('<style type="text/css"></style>').text('input[type="range"]::-webkit-slider-runnable-track { background-image:-webkit-gradient(linear, left top, right top, color-stop('+val+', orange), color-stop('+val+', #C5C5C5));}').appendTo('head');


  });
});

Share