Javascript 当达到某个值时，多次更改jQuery滑块的颜色

我试图制作一个滑块，当滑块达到某个值时，它会改变整个背景和滑块手柄的颜色。我想有5个不同的变化阶段。又称作低-超高帐单

我能找到的唯一一个类似的滑块是这个网站上的：

注意：我还希望短语在滑块下方更改颜色…例如这是一张低账单这是一张中账单如何同时更改短语

对不起，我是JavaScript新手

下面是我的jQuery示例：

---

感谢您的帮助，再次感谢

这把小提琴会让你开始-

我将所有的if/else放入函数中，并在每个if/else的末尾重置颜色

我不确定你是否希望整个身体都改变颜色，但每个人都有自己的颜色

你可以玩颜色和定位

JS

---

我可以帮你-你需要改变很多东西你想让它改变每个账单条件的背景色，对吗？检查你的小提琴-我改变了一些东西-背景色仍然不起作用，但它更接近

<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();
    }
  });
});

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;
                                              }
                          });