jQuery UI滑块没有'生活'效果和CSS样式

Question

基本上这里有几个问题作为ui-slider ucas点&下面显示的等级不是'活'每个说我想他们出现作为滑块用来。所以所有的计算都是直接发生的，所以当你滑动它们时就会改变，而不是当用户停止时。

另外，我怎么会去造型酒吧从而杆向上移动已下跌会变成某种颜色的位。

对于真人版：http://universitycompare.com

我jQuery的滑块的下面可以看到：

jQuery(document).ready(function($) { 

    var slider1 = $("#slider").slider({ 
     max: 420, 
     min: 0, 
     step: 20, 
     change: function(event, ui) { 
      $("#s2").html(ui.value);  
      $("#s2") 
     }, 
     stop:Calculate 
    }); 

    var slider2 = $("#slider2").slider({ 
     max: 420, 
     min: 0, 
     step: 20, 
     change: function(event, ui) { 
      $("#s3").html(ui.value);  
      $("#s3") 
     }, 
     stop:Calculate 

    }); 

    var div = $('#s4'); //cache this object in a variable if you'll be using it multiple times 
    slide: function Calculate(){ 
     var val1 = slider1.slider('option', 'value'); 
     var val2 = slider2.slider('option', 'value'); 

     var finalVal = (val1 + val2)/2; 
     //update the ui 
      if (finalVal === 0) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('N/A'); 
      } 

      if (finalVal === 20) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('N/A'); 
      } 

      if (finalVal === 40) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('N/A'); 
      } 

      if (finalVal === 60) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('N/A'); 
      } 

      if (finalVal === 80) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('N/A'); 
      } 

      if (finalVal === 100) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('N/A'); 
      } 

      if (finalVal === 120) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('EEE'); 
      } 

      if (finalVal === 140) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('DEE'); 
      } 

      if (finalVal === 160) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('DDE'); 
      } 

      if (finalVal === 180) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('DDD'); 
      } 

      if (finalVal === 200) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('CDD'); 
      } 

      if (finalVal === 220) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('CCD'); 
      } 

      if (finalVal === 240) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('CCC'); 
      } 

      if (finalVal === 260) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('BCC'); 
      } 

      if (finalVal === 280) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('BBC'); 
      } 

      if (finalVal === 300) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('BBB'); 
      } 

      if (finalVal === 320) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('ABB'); 
      } 

      if (finalVal === 340) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('AAB'); 
      } 

      if (finalVal === 360) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('AAA'); 
      } 

      if (finalVal === 380) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('A*AA'); 
      } 

      if (finalVal === 400) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('A*A*A'); 
      } 

      if (finalVal === 420) { //replace 220 with whatever you're checking 
       //if finalVal does equal 220 
       div.text('A*A*A*'); 
      } 

    } 
}); 

滑块的CSS这里也有，但是似乎并没有改变颜色：

/* Slider 
----------------------------------*/ 
.ui-slider { position: relative; text-align: left; background-color:#ffdd4e; height:7px; } 
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } 
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } 

.ui-slider-horizontal { height: 7px; } 
.ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.6em; background-color:#ffdd4e; } 
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } 
.ui-slider-horizontal .ui-slider-range-min { left: 0; } 
.ui-slider-horizontal .ui-slider-range-max { right: 0; } 

.ui-widget-header { background-color:#0071bc !important; height:8px !important; left:1px !important; top:1px !important; position:absolute !important; } 

Answer 1

试试这个jsFiddle example。

到这两个滑块我添加到您的计算函数调用滑块的滑动事件。

slide: Calculate, 

更新：

要显示滑块值，而不是使用：

slide: function(event, ui) { 
    Calculate(); 
    $("#s2").html(ui.value); 
}, 

jsFiddle example

注意，在这个拨弄我改变你的CSS，使值可见的（例如，你有白色的白色）。