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
– Sukanya1991, Commented Mar 31, 2015 at 16:34
possible duplicate of Changing CSS pseudo-element styles via JavaScript — Heretic Monkey
– Heretic Monkey, Commented Mar 31, 2015 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
– Dynamic Remo, Commented Mar 31, 2015 at 16:44

heff · Accepted Answer · 2020-04-08 01:16:41Z

2

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.

answered Apr 8, 2020 at 1:16

heff

3,2591 gold badge23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

d_z90 · Accepted Answer · 2015-03-31 16:28:13Z

1

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.

answered Mar 31, 2015 at 16:28

d_z90

1,2732 gold badges20 silver badges49 bronze badges

2 Comments

Dynamic Remo Over a year ago

yeah, i initially tried this but its also not working.

d_z90 Over a year ago

So as already suggested, or try to have a look here: stackoverflow.com/questions/4481485/…

Javier Rodriguez · Accepted Answer · 2015-12-10 16:16:49Z

0

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.

answered Dec 10, 2015 at 16:16

Javier Rodriguez

1263 bronze badges

Comments

Swanand Taware · Accepted Answer · 2017-08-09 09:42:48Z

0

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.

edited Aug 9, 2017 at 9:42

answered Aug 9, 2017 at 9:17

Swanand Taware

7732 gold badges7 silver badges32 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

CSS

Javascript

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

CSS

Javascript

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related