Input range, rounding "bug" problems

[disktant]

I have notised rounding problems
but don´t know how to solve them

<script src="jquery-1.8.0.min.js"></script>
<script>
	 $(function() {
	   var el, newPoint, newPlace, offset;
	   $("input[type='range']").change(function() {
	     el = $(this);
	     width = el.width();
	     newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
	     offset = -1.3;
	     if (newPoint < 0) { newPlace = 0;  }
	     else if (newPoint > 1) { newPlace = width; }
	     else { newPlace = width * newPoint + offset; offset -= newPoint;}
	     el
	       .next("output")
	       .css({
	         left: newPlace,
	         marginLeft: offset + "%"
	       })
	       .text(el.val());
	   })
	   .trigger('change');
	 });
	</script>
    
    <script type="text/javascript"><!--
function updatesum() {
document.form.sum.value = parseFloat(document.form.sum1.value) * parseFloat(document.form.sum2.value) / 10 }
//--></script>



<form name="form">
<div>
<input id="sum1" onChange="updatesum()" name="sum1" type="range" step="0.1" min=0 max=20 value=0 style="width: 100%;">Sum1
      
<output for="sum1">1</output>
</div>

<div>
<input id="sum2" onChange="updatesum()" name="sum2" type="range" step="0.5" min=1 max=10 value=2 style="width: 100%;">Sum2

<output for="sum2">1</output>
</div>

<div>
Total sum
<input name="sum" type="text" value="0" size="5" readonly>  
</div>

[disktant]

Examples of the rounding problem
the slider give me this

0
0.1
0.2
0.30000000000000004
0.4
0.5
0.6000000000000001
0.7000000000000001
0.8
0.9
1

[JPnyc]

.toFixed(1) on the output should fix it.

[disktant]

.toFixed(1) on the output should fix it.

Yes, my frient google told me that to just
but I realy don´t know how to
can you give me a example

[disktant]

Changed this code, and now the input name="sum" works
but how to fix this for the two outputs ?

document.form.sum.value = parseFloat(document.form.sum1.value) * parseFloat(document.form.sum2.value) / 10 }

document.form.sum.value = (parseFloat(document.form.sum1.value) * parseFloat(document.form.sum2.value) / 10).toFixed(2); }

[JPnyc]

You only need it for your final output. It'll force a round-up and fixed dec. places, whatever # you set.

[disktant]

My first code didn´t work with most mobilephones and some browsers
the sliders didn´t work so I made this instead, but my Javascript skills ar not to good
so I cant find out how to to get the sum in the last Div witout a submit button

<script>
        $(function() {
          $( "#slider1" ).slider({
            value:0,
            min: 0,
            max: 20,
            step: 0.1,
            slide: function( event, ui ) {
              $( "#sum1" ).val( ui.value + " l");
            }
          });
          $( "#sum1" ).val( $( "#slider1" ).slider( "value" )  +" l");
        });
        </script>
        
        <script>
        $(function() {
          $( "#slider2" ).slider({
            value:0,
            min: 0,
            max: 10,
            step: 0.5,
            slide: function( event, ui ) {
              $( "#sum2" ).val( ui.value + " %");
            }
          });
          $( "#sum2" ).val( $( "#slider2" ).slider( "value" )  +" %");
        });
        </script>


<script type="text/javascript"><!--
function updatesum() {
document.form.sum.value = (parseFloat(document.form.sum1.value) * parseFloat(document.form.sum2.value) / 10).toFixed(2); }
//--></script>

    
   <form name="form">
        <div>
        <input type="text" onChange="updatesum()" name="sum1" id="sum1" style="border:0; font-weight:bold;" />
        <div id="slider1"></div>
        </div>

       <div>
        <input type="text" onChange="updatesum()" name="sum2" id="sum2" style="border:0; font-weight:bold;" />
        <div id="slider2"></div>
        </div>

<div>   
<input name="sum" type="text" value="0" size="5" readonly>  
 </div>
    </form>

[disktant]

Se new thred instead

[disktant]

New thread in Javascript http://www.webdeveloper.com/forum/sh...57#post1220157