Change color of input range slider with javascript

Question

How can I change the color of my slider from

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

I already tried color, bg-color and background-color and it won't change...

UPDATE:

I wanna change it with javascript. Something like this:

document.getElementById("input").style.background-color = "000000";

Similar http://stackoverflow.com/questions/3556157/how-to-customize-the-html5-input-range-type-looks-using-css — PiLHA, Aug 28 '13 at 16:39

Kiran · Accepted Answer · 2013-08-28T16:56:21.050

9

Try this:

input[type=range] {
    -webkit-appearance: none;
    background-color: silver;
    width: 200px;
    height:20px;
}

input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
    background-color: #666;
    opacity: 0.5;
    width: 10px;
    height: 26px;
}

document.getElementById("input").style.backgroundColor = '#000000';

jsfiddle

edited Aug 28 '13 at 16:56

answered Aug 28 '13 at 16:40

Kiran

20,167
11
67
99

so can I change the style of the slider thumb with javascript too? – Lithilion Aug 28 '13 at 16:45
Yes you can change background color. updated code. see fiddle for demo. – Kiran Aug 28 '13 at 16:56
which background color you would like to change? input element with type range.. Am I right? – Kiran Aug 28 '13 at 16:59
i want to change the slider and the background – Lithilion Aug 28 '13 at 17:00
Am not sure about slider. But you can change range element background with this code. – Kiran Aug 28 '13 at 17:07
In my case this is not working. This is working fine on Fiddle but when i use this code in my project. It does not work. Can you please assist? – Sundeep Saluja Oct 08 '14 at 04:55
@SundeepSaluja: If you could share more info/ask new question with code that you are trying will help us to debug an issue. – Kiran Oct 08 '14 at 06:54

Change color of input range slider with javascript

1 Answers1

Linked