jquery thermometer not cover the area between 0 - 100% -
jquery thermometer not cover the area between 0 - 100% -
i trying create thermometer but have problem it's background. utilize next 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 element.style 0 - 100% now, 36.6 - 43%
the problem have on maths :( how have edit line 1 ? seek multiply number (1.4) , sub (36) test not work properly.
thanks lot
try making these modifications code.
i've set demo next jsfiddle. didn't supply html or css, demo outputs value 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 helps.
jquery
Comments
Post a Comment