From 79300f40ab447f4e4cafbc4c2e1f493a1f38c584 Mon Sep 17 00:00:00 2001
From: luc lebosse <luc.lebosse@tech-hunters.com>
Date: Thu, 21 Jul 2016 16:13:50 +0200
Subject: [PATCH] add custom slider using javascript

---
 UI/mousediv.html | 101 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 UI/mousediv.html
diff --git a/UI/mousediv.html b/UI/mousediv.html
new file mode 100644
index 00000000..1aa9965c
--- /dev/null
+++ b/UI/mousediv.html
@@ -0,0 +1,101 @@
+<html>
+<head>
+</head>
+<body>
+<style>
+.sliderthumb{
+position : absolute;
+cursor : pointer;
+ }
+</style>
+<script>
+var offset = 0;
+var isDown = false;
+var active_control = null;
+
+document.addEventListener('mouseup', function() {
+    isDown = false;
+}, true);
+
+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) ;     
+         }  
+}
+
+document.addEventListener('mousemove', function(event) {
+    event.preventDefault();
+    if (isDown) {
+    movethumb(event.clientX);
+    }
+}, true);
+
+function rangeclicked(event,element)
+{
+  
+    if (element.hasAttribute('customthumb')){
+        active_control = document.getElementById(element.getAttribute('customthumb'));   
+        offset = 0;  
+        movethumb(event.clientX);
+        }
+}
+
+function initthumb( element)
+{
+element.addEventListener('mousedown', function(e) {
+    isDown = true;
+    offset = element.offsetLeft - e.clientX;
+    active_control = this;
+}, true);
+ if (element.hasAttribute('bgimage')){
+    element.innerHTML = element.getAttribute('bgimage');
+    }
+ if (element.hasAttribute('customrange')){
+     var r = document.getElementById(element.getAttribute('customrange')).getBoundingClientRect();
+    element.style.top = r.top;
+    element.style.left = r.left;
+    }
+}
+
+function initrange( element)
+{
+ if (element.hasAttribute('bgimage')){
+    element.innerHTML = element.getAttribute('bgimage');
+    }
+}
+ 
+</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>
+<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>
+<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>
+<script>
+
+initrange( range1);
+initrange( range2);
+initthumb( thumb1);
+initthumb( thumb2);
+</script>
+</body>
+</html>
