jQuery - Change CSS on Range Track

Question

I'm trying to have jQuery set the gradient background to be at a certain point on a range slider, but no matter what methods I try, it doesn't seem to want to work for me. I can get the log to show the correct percentage, but cannot get the style change to apply using the solution found here(how to call range::-webkit-slider-runnable-track?). Perhaps someone can spot what error I'm making along the way?

CSS styling: background: linear-gradient(90deg, rgba(218,80,25,1) 0%, rgba(184,160,34,1) 1%);

function tTime(s) {
    var h = Math.floor(s/3600);
    s -= h*3600;
    var m = Math.floor(s/60);
    s -= m*60;
    return (m < 10 ? m : m)+":"+(s < 10 ? '0'+s : s);
}

function diff(a,b){return Math.abs(a-b);}

function curr(s) {
  var total = $("#progress-bar").prop('max');
  var current = $("#progress-bar").val();
  return ((100/total)*current);
}

  var style = $("<style>", {type:"text/css"}).appendTo("head");

$(function() {
  $('#elapsed').html( tTime($("#progress-bar").prop('min')) );
  $('#remaining').html( tTime($("#progress-bar").prop('max')) );
  
  $(document).on('input', '#progress-bar', function() {
    $('#elapsed').html( tTime($(this).val()) );
    $('#remaining').html( tTime(diff($("#progress-bar").prop('max'),$("#progress-bar").val())) );
    var val = curr($(this).val());
    style.text('input[type=range]::-webkit-slider-runnable-track { background-color: linear-gradient(90deg, rgba(218,80,25,1) 0%, rgba(184,160,34,1) ' + val + '%);}');
    console.log(val + '%')
  });
});

The problem that you are having is you are trying to modify the style tag after it has been loaded. The best bet is use jquery to modify that element's CSS [Applying css3 gradients with jQuery](https://stackoverflow.com/questions/6016988/applying-css3-gradients-with-jquery) — imvain2, Jul 07 '20 at 22:27
From what I've read in almost every answer to questions like my own, there is no way to set the background property of the pseudo element with jQuery. The suggested method isn't working when using $("input[type=range]::-webkit-slider-runnable-track").css({}). Any other recommendations? — Mitchell, Jul 07 '20 at 22:51

score 1 · Accepted Answer · answered Jul 08 '20 at 19:33

Modified from this answer, I was able to get it to work. It still uses a style tag, but it appends it to the head depending on which browser the user is using. It also checks to see if a style has already been created and removes it from the DOM.

function create_style(css) {
  head = document.head,
    oldstyles = head.querySelector("#rangestyle"),
    style = document.createElement('style');
  if (oldstyles != null) {
    oldstyles.remove();
  }
  style.id = "rangestyle";
  head.appendChild(style);

  style.type = 'text/css';
  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }

}

create_style("input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, rgba(218,80,25,1) 0%, rgba(184,160,34,1) 30%);}");

<input class="range" type="range" min="0" max="100" value="95" step="1" />

jQuery - Change CSS on Range Track

1 Answers1