Overwrite background-color (css) - css

Question

I have an input that has two classes with background-color that I need to overwrite. I'm trying to do this: put that input in a external container, and (with javascript) I will change the class of that container to the desire one.
The input has two classes as I said, and those classes are the one which I need to change: irs-line and irs-bar. Those two classes has their own background-color's. I need them on red and yellow. I will trigger the change of classes via javascript with the value of some radio buttons. (that's another story)
My question is, in some forum, a guy give me this hint:
.container.color-yellow .irs-line {
background-color: yellow;
}
.container.color-red .irs-line {
background-color: red;
}
But I'm not sure how it works or how I should use those classes in the input. Any help? (I would ask to that guy what were trying he to do but I can't)
UPDATE:
This is my code where I call the input:
<div className="uk-width-1-4">
<input type="text" name="timewmsslider" ref="timewmsslider" />
</div>
It's Reacjs, so with ref="timewmsslider" is how the input is defined with their default irs-bar and irs-line classes.
That input is being generated with the default irc-line and irc-bar css classes. So, how should I call if I have this classes in the css (for both colors red and yellow)?
.irs-line-yellow {
height: 16px;
top: 24px;
border-radius:8px;
border: #EEEEEE 1px solid;
background: #e9d759; /* Old browsers */
background: -moz-linear-gradient(top, #e9d759 0%, #e9d759 70%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e9d759 0%,#e9d759 70%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e9d759 0%,#e9e459 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9d759', endColorstr='#e9d759',GradientType=0 ); /* IE6-9 */
position: relative;
display: block;
overflow: hidden;
outline: 0!important;
}
.irs-bar-yellow {
height: 16px;
top: 24px;
margin-left: -7px;
padding-right: 5px;
background: #e9d759; /* Old browsers */
background: -moz-linear-gradient(top, #e9d759 0%, #e9d759 70%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e9d759 0%,#e9d759 70%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e9d759 0%,#e9d759 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9d759', endColorstr='#e9d759',GradientType=0 ); /* IE6-9 */
position: absolute;
display: block;
left: 0;
width: 0;
border-radius:8px;
border: #EEEEEE 1px solid;
}
.irs-bar-red {
height: 16px;
top: 24px;
margin-left: -7px;
padding-right: 5px;
background: #e95959; /* Old browsers */
background: -moz-linear-gradient(top, #e95959 0%, #e95959 70%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e95959 0%,#e95959 70%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e95959 0%,#e95959 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e95959', endColorstr='#e95959',GradientType=0 ); /* IE6-9 */
position: absolute;
display: block;
left: 0;
width: 0;
border-radius:8px;
border: #EEEEEE 1px solid;
}
.irs-line-red {
height: 16px;
top: 24px;
border-radius:8px;
border: #EEEEEE 1px solid;
background: #e95959; /* Old browsers */
background: -moz-linear-gradient(top, #e95959 0%, #e95959 70%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e95959 0%,#e95959 70%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e95959 0%,#e95959 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e95959', endColorstr='#e95959',GradientType=0 ); /* IE6-9 */
position: relative;
display: block;
overflow: hidden;
outline: 0!important;
}
I have to change the input classes with those ones depending on externala actions (some radio buttons will change the color of the bar and line via javascript)
Default case: http://jsfiddle.net/h307fdau/
Red case: http://jsfiddle.net/mxt78oa5/

Answer 1

Considering your latest HTML & CSS fiddle edits, I'd suggest the following jQuery:
1.Keep these CSS classes to best isolate the needed background-color property as you did in the shared fiddle in comments:
.red {background-color: red;}
.yellow {background-color: yellow;}
2.This jQuery will add or remove color classes according to radio input selection & remove any colors if they match "actual" string value on slider:
$range.on("change", function() {
//store slider & radio inputs values
var value = $(".js-range-slider").prop("value");
var radioColor = $(".extra-controls input[type=radio]:checked").val();
//if value matches actual remove colors
if (value == 'actual') {
$(".irs-line").removeClass(radioColor);
$(".irs-bar").removeClass(radioColor);
//prevent bottom line from coloring on slider actual date
$("#escenario-moderado").on("change", function() {
$(".irs-line").removeClass("yellow");
$(".irs-bar").removeClass("yellow");
});
$("#escenario-severo").on("change", function() {
$(".irs-line").removeClass("red");
$(".irs-bar").removeClass("red");
});
}
//else add the default radio input selected color
else {
$(".irs-line").addClass(radioColor);
$(".irs-bar").addClass(radioColor);
//add manually selected radio color
$("#escenario-moderado").on("change", function() {
$(".irs-bar").addClass("yellow");
$(".irs-line").addClass("yellow");
$(".irs-line").removeClass("red");
$(".irs-bar").removeClass("red");
});
$("#escenario-severo").on("change", function() {
$(".irs-line").addClass("red");
$(".irs-bar").addClass("red");
$(".irs-bar").removeClass("yellow");
$(".irs-line").removeClass("yellow");
});
}
});
Working JSFiddle