Question

I am trying to make something like a thermometer but but I have a problem with it’s background.
I use the following jQuery script

<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>  

But I would like the element.style to be from 0 – 100%
Now, it is from 36.6 – 43%

The problem I have is on maths 🙁
How I have to edit the line 1 ?
I try to multiply with a number (1.4) and sub with another (36) to test it but it does not work properly.

Thanks a lot

Answer 1

Try making these modifications to your code.

I’ve also set up a demo as the following jsFiddle. As you didn’t supply any HTML or CSS, the demo only outputs the value to the screen.

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

Hope it helps.