jquery溫度計沒有覆蓋0到100％之間的區域

Question

我正在嘗試使溫度計變成類似的東西，但是我的背景有問題。 我用下面的jQuery腳本

<script type="text/javascript"> 
$(document).ready(function() { 
var bkcolor; 
$('#slider').slider({ 
range: "min", 
    min : 36.6, 
    max : 43, 
    value: 36.6, 
    step: 0.1, 
    slide: function(event, ui) { 

    if(ui.value<=36.8){ bkcolor='#0f0';}; 
    if(ui.value>36.8 && ui.value<=37.5){bkcolor='#ff0';}; 
    if(ui.value>37.5 && ui.value<=39){bkcolor='#f6931f';};  
    if (ui.value > 39) { bkcolor = '#f00'; } 
    $('.progressbar-cover').css('bottom' , ui.value + '%'); // line 1 
    $('.progressbar-value').css('backgroundColor' , bkcolor); 
    $("#amount").val($("#slider").slider("value")); 
    } 
}); 
}); 
</script> 

但我想element.style從0 - 100％ 現在，它是從36.6 - 43％

我的問題是關於數學:( 我怎麼也得編輯該行1？ 我嘗試了一些（1.4）和子與另一個（36），以測試它繁殖，但它不能正常工作。

非常感謝

Answer 1

嘗試對您的代碼進行這些修改。

我也成立了一個演示，如下jsFiddle。由於您沒有提供任何HTML或CSS，演示僅將該值輸出到屏幕。

$(document).ready(function() {   
    $('#slider').slider({ 
     range: "min", 
     min : 36.6, 
     max : 43, 
     value: 36.6, 
     step: 0.1, 
     slide: function(event, ui) { 

      // determine background color 
      var bkcolor; 
      if (ui.value<=36.8) 
       bkcolor='#0f0'; 
      else if (ui.value>36.8 && ui.value<=37.5) 
       bkcolor='#ff0'; 
      else if (ui.value>37.5 && ui.value<=39) 
       bkcolor='#f6931f'; 
      else if (ui.value > 39) 
       bkcolor = '#f00'; 

      // determine percentage value 
      var minValue = $(this).slider('option', 'min'); 
      var maxValue = $(this).slider('option', 'max'); 
      var currentValue = ui.value; 
      var percentageValue = Math.round((currentValue - minValue)/(maxValue - minValue) * 100); 

      // update screen 
      $('.progressbar-cover').css('bottom' , percentageValue + '%'); // line 1 
      $('.progressbar-value').css('backgroundColor' , bkcolor); 
      $("#amount").val($("#slider").slider("value")); 
     } 
    }); 
}); 

希望它有幫助。