0

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!

3
  • i can help - u are going to need to change a lot of stuff
    – ewizard
    Commented Jun 12, 2014 at 4:03
  • you want it to change the background color on each "bill" condition right?
    – ewizard
    Commented Jun 12, 2014 at 4:03
  • check ur fiddle jsfiddle.net/6Bprf/10 - i changed some things - still dont have background color working but its closer
    – ewizard
    Commented Jun 12, 2014 at 4:24

1 Answer 1

0

This FIDDLE will get you started - FIDDLE.

I put all of the if/else into the function, and reset the color at the end of each if/else.

I'm not sure you want the whole body to change color, but to each his/her own.

You can play with colors and positioning.

JS

var bill_slider;

function update()
{
  $("#monthly_bill").text('$' + bill_slider);
  $("#yearly_bill").text('$' + (bill_slider * 12));
  if (bill_slider < 100)
     {
      $('.customer div:eq(0)').css('display', 'block');
      $('.customer div:eq(0)').css('color', 'yellow');
      $( 'body' ).css('background-color', 'green');
      $('.ui-slider-handle').css('color', 'green');
     }
     else
     {
      $('.customer div:eq(0)').css('display', 'none');
      }   
  if (bill_slider >= 100 && bill_slider < 200)
     {
      $('.customer div:eq(1)').css('display', 'block');
      $('.customer div:eq(1)').css('color', 'green');
      $( 'body' ).css('background-color', 'yellow');
      $('.ui-slider-handle').css('color', 'yellow');
      }
     else
     {
      $('.customer div:eq(1)').css('display', 'none');
     }
  if (bill_slider >= 200 && bill_slider < 300)
     {
      $('.customer div:eq(2)').css('display', 'block');
      $('.customer div:eq(2)').css('color', 'lightblue');
      $( 'body' ).css('background-color', 'gray');
      $('.ui-slider-handle').css('color', 'gray');
     }
     else
     {
      $('.customer div:eq(2)').css('display', 'none');
     }
  if (bill_slider >= 300 && bill_slider < 400)
     {
      $('.customer div:eq(3)').css('display', 'block');
      $('.customer div:eq(3)').css('color', 'blue');
      $( 'body' ).css('background-color', 'white');
      $('.ui-slider-handle').css('color', 'white');         
      }
     else
     {
      $('.customer div:eq(3)').css('display', 'none');
     }
  if (bill_slider > 400)
     {
      $('.customer div:eq(4)').css('display', 'block');
      $('.customer div:eq(4)').css('color', 'red');
      $( 'body' ).css('background-color', 'pink');
      $('.ui-slider-handle').css('color', 'pink');
     }
     else
     {
      $('.customer div:eq(4)').css('display', 'none');
     }
}

$("#bill_slider").slider({
                          value: 1,
                            min: 0,
                            max: 500,
                           step: 5,
                          slide: function (event, ui) {
                                              update();
                                              bill_slider = ui.value;
                                              }
                          });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.