I am trying to make a slider that changes color of the entire background and slider handle when the slider reaches a certain value. I want to have 5 different stages of change. aka. "low- super high bill"
The only slider that I could find that looked similar, is the one on this site: http://www.solarcity.com/
Note: I also want the phrase to change color underneath the slider...such as "This is a low bill" "This is a Medium Bill" How do I change the phrases simultaneously also?
(Sorry I am new to JavaScript)
Here is my jQuery example: http://jsfiddle.net/6Bprf/8/
<span class="slider-output" id="monthly_bill">$0</span>/month or <span class="slider- output" id="yearly_bill">$0</span>/year
<div id="bill_slider"></div>
<div class="customer">
<div class="low_bill">
<FONT COLOR="#009900">This is a low bill.</FONT>
</div>
<div class="moderate_bill">
<FONT COLOR="#FFFF00">This is a moderate bill.</FONT>
</div>
<div class="medium_bill">
<FONT COLOR="#FF7519">This is a medium bill.</FONT>
</div>
<div class="high_bill">
<FONT COLOR="#FF3300">This is a high bill.</FONT>
</div>
<div class="super_high_bill">
<FONT COLOR="#FF0000">This is a super high bill.</FONT>
</div>
</div>
$(document).ready(function () {
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (bill_slider * 12)
$("#monthly_bill").text(bill_slider);
$("#yearly_bill").text(yearly_bill);
}
if (monthly_bill < 150) {
greeting = "low bill";
}
if (monthly_bill > 150) {
greeting = "moderate bill";
}
if (monthly_bill > 250) {
greeting = "medium bill";
}
if (monthly_bill > 350) {
greeting = "high bill";
}
if (monthly_bill > 450) {
greeting = "super high bill";
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function () {
update();
}
});
});
Any help is appreciated, Thanks again!