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？ は、私は別の（36）と番号（1.4）とサブそれをテストするために掛けるしようとする行を編集する必要がありますが、それが正常に動作しない方法:( 。

どうもありがとう

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

希望します。