From bbd16f6d2f902d0a1811915a31c9180ad8356a66 Mon Sep 17 00:00:00 2001
From: luc lebosse <luc.lebosse@tech-hunters.com>
Date: Fri, 22 Jul 2016 11:00:44 +0200
Subject: [PATCH] add min max boundaries for range

add function to set cursor position based on value
---
 UI/mousediv.html | 87 +++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 68 insertions(+), 19 deletions(-)

diff --git a/UI/mousediv.html b/UI/mousediv.html
index 1aa9965c..4dbb8122 100644
--- a/UI/mousediv.html
+++ b/UI/mousediv.html
@@ -5,6 +5,10 @@
 <style>
 .sliderthumb{
 position : absolute;
+cursor : pointer;
+ }
+ 
+.sliderrange{
 cursor : pointer;
  }
 </style>
@@ -17,25 +21,67 @@ document.addEventListener('mouseup', function() {
     isDown = false;
 }, true);
 
+//position is based on screen position value 
 function movethumb(pos)
 {
-        var p = pos + offset;
-        var rangewidth=0;
-        var minpos =0;
-        var maxpos = 0;
-         if (active_control.hasAttribute('customrange')){
-              var r = document.getElementById(active_control.getAttribute('customrange')).getBoundingClientRect();
-              rangewidth = r.right - r.left;
-              minpos = r.left;
-              maxpos = r.right;
-         }
-        var r2 = active_control.getBoundingClientRect();
-        if ( p >maxpos - (r2.right-r2.left)) p = maxpos - (r2.right-r2.left);
-        if ( p <minpos) p =minpos ;
-        active_control.style.left = p+ 'px';
-        if (active_control.hasAttribute('render')){
-        document.getElementById(active_control.getAttribute('render')).value =Math.round(p-minpos) ;     
-         }  
+    var p = pos + offset;
+    var minpos =0;
+    var maxpos = 0;
+    var minvalue =0;
+    var maxvalue = 100;
+    var value=0;
+    var rangeelement =null;
+    if (active_control.hasAttribute('customrange')){
+        rangeelement = document.getElementById(active_control.getAttribute('customrange'));
+        var r = rangeelement.getBoundingClientRect();
+        minpos = r.left;
+        maxpos = r.right;
+         if (rangeelement.hasAttribute('min')){
+             minvalue = rangeelement.getAttribute('min')
+          }
+        if (rangeelement.hasAttribute('max')){
+             maxvalue = rangeelement.getAttribute('max')
+          }
+     }
+    var r2 = active_control.getBoundingClientRect();
+    if ( p >maxpos - (r2.right-r2.left)) p = maxpos - (r2.right-r2.left);
+    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) ;     
+    active_control.style.cursor='pointer';
+     }  
+}
+
+//position is based on range value 
+function movethumbat(thumbcursor, value){
+    var minvalue =0;
+    var maxvalue = 100;
+    var minpos =0;
+    var maxpos = 0;
+    var rangeelement =null;
+    if (thumbcursor.hasAttribute('customrange')){
+          rangeelement = document.getElementById(thumbcursor.getAttribute('customrange'));
+          var r = rangeelement.getBoundingClientRect();
+          minpos = r.left;
+          maxpos = r.right;
+          if (rangeelement.hasAttribute('min')){
+             minvalue = rangeelement.getAttribute('min')
+          }
+          if (rangeelement.hasAttribute('max')){
+             maxvalue = 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';
+    if (thumbcursor.hasAttribute('render')){
+    document.getElementById(thumbcursor.getAttribute('render')).value =value; 
+    }
 }
 
 document.addEventListener('mousemove', function(event) {
@@ -79,17 +125,20 @@ function initrange( element)
     }
 }
  
+ 
+ 
 </script>
 <table border=1>
 <tr>
-<td><div id='range1'  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="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>
 <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' 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="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>
 <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>
+<input type='button' onclick='movethumbat(thumb1, inputtest.value)'  value='push me' > <input id='inputtest' type='number' />
 <script>
 
 initrange( range1);