How to change the color of Track for RANGE Input using Jquery/Javascript?

Question

Here`s 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'm not able to change the background color using Jquery/Javascript. Please help me with this. Here's the code i'm trying to.

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

Is there any specific event when you want to change the color? Put it inside `$(document).ready` function — Sukanya1991, Mar 31 '15 at 16:34
possible duplicate of [Changing CSS pseudo-element styles via JavaScript](http://stackoverflow.com/questions/4481485/changing-css-pseudo-element-styles-via-javascript) — Heretic Monkey, Mar 31 '15 at 16:38
i want to dynamically change the background color of the range input depending on the value of this range input. That`s why I cannot use CSS classes. — Dynamic Remo, Mar 31 '15 at 16:44

score 1 · Answer 1 · answered Mar 31 '15 at 16:28

According to the code in your question, I see a mistake in your syntax. In css the background color property is written as "background-color: color_hex_value". This is how your css code should look 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");

In case you are still having doubts, give a look at these two sources for css background-color properties and Jquery css() method.

So as already suggested, or try to have a look here: http://stackoverflow.com/questions/4481485/changing-css-pseudo-element-styles-via-javascript/12207551#answer-8051488 — d_z90, Mar 31 '15 at 17:37

score 1 · Answer 2 · answered Apr 08 '20 at 01:16

You can do this now (2020) by making use of CSS variables.

CSS

#golden_range::-webkit-slider-runnable-track {
  background: var(--track-background, #ddd);
}

#golden_range::-moz-range-track {
  background: var(--track-background, #ddd);
}

Javascript

document.querySelector('#golden_range').style.setProperty('--track-background', '#f00');

(should change the track background to red)

I'm doing this in Player Chrome to style the media player progress bar, using a background gradient on the track to show progress.

score 0 · Answer 3 · answered Dec 10 '15 at 16:16

Bad news. I have not found a proper way to do... but I found a dirty way; Insert a style tag in the body of the page. Of course, the content of this tag is generated with 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);

it's ugly, slow and bad, but it works.

Swanand Taware · Answer 4 · 2017-08-09T09:42:48.450

Add below code into 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: Please check changeRange value and change as you want.

How to change the color of Track for RANGE Input using Jquery/Javascript?

4 Answers4

CSS

Javascript

Linked