How to change track color for RANGE input using jQuery / Javascript?

Question

Here is the HTML input range

<input id="golden_range" type="range">

I can change the background color of the range track to "#DDD" using this CSS

#golden_range::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #DDD;
    border: none;
    border-radius: 3px;
}
#golden_range::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #DDD;
    border: none;
    border-radius: 3px;
}

but I can not change the background color using jquery / javascript. Please help me with this. Here is the code I'm trying to do.

$('#golden_range::-webkit-slider-runnable-track').css('background', '#000');
$('#golden_range::-moz-range-track').css('background', '#000');

Answer 1

According to the code in your question, I see an error in your syntax. In css, the background color property is written as "background-color: color_hex_value". Here is what your css code looks like:

#golden_range::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
  background-color: #DDD;
  border: none;
  border-radius: 3px;
}
  #golden_range::-moz-range-track {
  width: 300px;
  height: 5px;
  background-color: #DDD;
  border: none;
  border-radius: 3px;
}

And this is the code for jquery:

$("#golden_range::-webkit-slider-runnable-track").css("background-color", "#000");

If you still have doubts, look at these two sources for css background-color properties and the jquery css () method .

Answer 2

. ... ; . , javascript:

var estilo = $("<style>").attr("id", "some_id");
//for Chrome, e.g.
 var mod= "::-webkit-slider-runnable-track";

var txt= "#id_range" + mod + " {\n";
txt+= "    background-color: rgb(100,100,100)\n";
txt+= "}\n";

estilo.text(txt);

$("#some_id").remove();
$("div#other_id").append(estilo);

, , .

Answer 3

Add the code below to your files

CSS

#golden_range.change::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #000;
    border: none;
    border-radius: 3px;
}
#golden_range.change::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #000;
    border: none;
    border-radius: 3px;
}

JQuery

$(document).on('input', '#golden_range', function() {
       var rangeValue = $(this).val(); 
       var changeRange = 20;
        if(currrentRange > changeRange){
            $("#golden_range").addClass("change");
        }
        });

Note. . Check the value of changeRange and change it as you want.