diff --git a/UI/mousediv.html b/UI/mousediv.html
index 4dbb8122..b73843b4 100644
--- a/UI/mousediv.html
+++ b/UI/mousediv.html
@@ -37,10 +37,10 @@ function movethumb(pos)
         minpos = r.left;
         maxpos = r.right;
          if (rangeelement.hasAttribute('min')){
-             minvalue = rangeelement.getAttribute('min')
+             minvalue = parseFloat(rangeelement.getAttribute('min'))
           }
         if (rangeelement.hasAttribute('max')){
-             maxvalue = rangeelement.getAttribute('max')
+             maxvalue = parseFloat(rangeelement.getAttribute('max'))
           }
      }
     var r2 = active_control.getBoundingClientRect();
@@ -48,8 +48,8 @@ function movethumb(pos)
     if ( p <minpos) p =minpos ;
     active_control.style.left = p+ 'px';
     if (active_control.hasAttribute('render')){
-    value = ((p-minpos) * (maxvalue-minvalue))/((maxpos-minpos)- (r2.right-r2.left))
-    document.getElementById(active_control.getAttribute('render')).value =Math.round(value) ;     
+    value = (((p-minpos) * (maxvalue-minvalue))/((maxpos-minpos)- (r2.right-r2.left)))
+    document.getElementById(active_control.getAttribute('render')).value = Math.round(value + minvalue) ;     
     active_control.style.cursor='pointer';
      }  
 }
@@ -67,18 +67,18 @@ function movethumbat(thumbcursor, value){
           minpos = r.left;
           maxpos = r.right;
           if (rangeelement.hasAttribute('min')){
-             minvalue = rangeelement.getAttribute('min')
+             minvalue = parseFloat(rangeelement.getAttribute('min'))
           }
           if (rangeelement.hasAttribute('max')){
-             maxvalue = rangeelement.getAttribute('max')
+             maxvalue = parseFloat(rangeelement.getAttribute('max'))
           }
      }
     if (value > maxvalue) value = maxvalue;
     if (value < minvalue) value = minvalue;
     var r2 = thumbcursor.getBoundingClientRect();
     var pos=0;
-    pos = ((((maxpos-minpos) - (r2.right-r2.left)) / (maxvalue-minvalue)) * value) + minpos;
-     thumbcursor.style.left = pos+ 'px';
+    pos = ((value-minvalue)*((maxpos-minpos)-(r2.right-r2.left))/(maxvalue-minvalue))+minpos;
+    thumbcursor.style.left = pos+ 'px';
     if (thumbcursor.hasAttribute('render')){
     document.getElementById(thumbcursor.getAttribute('render')).value =value; 
     }
@@ -130,11 +130,11 @@ function initrange( element)
 </script>
 <table border=1>
 <tr>
-<td><div id='range1'  min="0" max="270" class='sliderrange' onclick ="rangeclicked(event,this);"bgimage="<svg width='310' height='10' viewbox='0 0 310 10'><rect width='310' height='10' style='fill:rgb(255,0,255);stroke-width:3;stroke:rgb(0,0,0)' />" customthumb='thumb1'></div>
+<td><div id='range1'  min="-10" max="270" class='sliderrange' onclick ="rangeclicked(event,this);"bgimage="<svg width='310' height='10' viewbox='0 0 310 10'><rect width='310' height='10' style='fill:rgb(255,0,255);stroke-width:3;stroke:rgb(0,0,0)' />" customthumb='thumb1'></div>
 <div id='thumb1' class='sliderthumb' render='v1' bgimage="<svg width='10' height='10' viewbox='0 0 10 10'><circle cx='5' cy='5' r='5'/></svg>" customrange='range1'></div>
 </td><td><input id='v1' type='number' value='0'/></td></tr>
 <tr>
-<td><div id='range2'  min="0" max="270" onclick ="rangeclicked(event,this);" bgimage="<svg width='310' height='10' viewbox='0 0 310 10'><rect width='310' height='10' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)' />" customthumb='thumb2'></div>
+<td><div id='range2'  min="50" max="300" onclick ="rangeclicked(event,this);" bgimage="<svg width='310' height='10' viewbox='0 0 310 10'><rect width='310' height='10' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)' />" customthumb='thumb2'></div>
 <div id='thumb2' class='sliderthumb' render='v2'  bgimage="<svg width='10' height='10' viewbox='0 0 10 10'><circle cx='5' cy='5' r='5'/></svg>" customrange='range2'></div>
 </td><td><input id='v2' type='number' value='0'/></td></tr>
 </table>