--- a/svghmi/widget_circularslider.ysl2	Wed Sep 30 12:31:59 2020 +0200
+++ b/svghmi/widget_circularslider.ysl2	Thu Oct 01 14:23:27 2020 +0200
@@ -7,16 +7,33 @@
         range = undefined;
         circle = undefined;
         handle_pos = undefined;
-        svg_dist = undefined;
+        curr_value = 0;
         drag = false;
         enTimer = false;
         last_drag = false;
 
         dispatch(value) {
+            let [min,max,start,totallength] = this.range;
+            //save current value inside widget
+            this.curr_value = value;
+
+            //check if in range
+            if (this.curr_value > max){
+                this.curr_value = max;
+                this.apply_hmi_value(0, this.curr_value);
+            }
+            else if (this.curr_value < min){
+                this.curr_value = min;
+                this.apply_hmi_value(0, this.curr_value);
+            }
+
             if(this.value_elt)
                 this.value_elt.textContent = String(value);
 
-            this.update_DOM(value, this.handle_elt);
+            //don't update if draging and setpoint ghost doesn't exist
+            if(!this.drag || (this.setpoint_elt != undefined)){
+                this.update_DOM(value, this.handle_elt);
+            }
         }
 
         update_DOM(value, elt){
@@ -25,6 +42,7 @@
             let tip = this.range_elt.getPointAtLength(length);
             elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")");
 
+            // show or hide ghost if exists
             if(this.setpoint_elt != undefined){
                 if(this.last_drag!= this.drag){
                     if(this.drag){
@@ -38,21 +56,28 @@
         }
 
         on_release(evt) {
+            //unbind events
             window.removeEventListener("touchmove", this.on_bound_drag, true);
             window.removeEventListener("mousemove", this.on_bound_drag, true);
 
             window.removeEventListener("mouseup", this.bound_on_release, true)
             window.removeEventListener("touchend", this.bound_on_release, true);
             window.removeEventListener("touchcancel", this.bound_on_release, true);
+
+            //reset drag flag
             if(this.drag){
                 this.drag = false;
             }
+
+            // get final position
             this.update_position(evt);
         }
 
         on_drag(evt){
+            //ignore drag event for X amount of time and if not selected
             if(this.enTimer && this.drag){
                 this.update_position(evt);
+
                 //reset timer
                 this.enTimer = false;
                 setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
@@ -103,40 +128,54 @@
 
                 //get handle distance from mouse position
                 if(fi<fiEnd){
-                    this.svg_dist=(fi)/(fiEnd)*(this.range[1]-this.range[0]);
+                   this.curr_value=(fi)/(fiEnd)*(this.range[1]-this.range[0]);
                 }
                 else if(fiEnd<fi && fi<fiEnd+minMax){
-                    this.svg_dist = this.range[1];
+                    this.curr_value = this.range[1];
                 }
                 else{
-                    this.svg_dist = this.range[0];
-                }
-
-
-                this.apply_hmi_value(0, Math.ceil(this.svg_dist));
-
-                // update ghost cursor
-                if(this.setpoint_elt != undefined){
-                    this.request_animate();
-                }
+                    this.curr_value = this.range[0];
+                }
+
+                //apply value to hmi
+                this.apply_hmi_value(0, Math.ceil(this.curr_value));
+
+                //redraw handle
+                this.request_animate();
+
             }
 
         }
 
         animate(){
-            this.update_DOM(this.svg_dist, this.setpoint_elt);
+            // redraw handle on screen refresh
+            // check if setpoint(ghost) handle exsist otherwise update main handle
+            if(this.setpoint_elt != undefined){
+                this.update_DOM(this.curr_value, this.setpoint_elt);
+            }
+            else{
+                this.update_DOM(this.curr_value, this.handle_elt);
+            }
         }
 
         on_select(evt){
+            //enable drag flag and timer
             this.drag = true;
             this.enTimer = true;
+
+            //bind events
             window.addEventListener("touchmove", this.on_bound_drag, true);
             window.addEventListener("mousemove", this.on_bound_drag, true);
 
-            window.addEventListener("mouseup", this.bound_on_release, true)
+            window.addEventListener("mouseup", this.bound_on_release, true);
             window.addEventListener("touchend", this.bound_on_release, true);
             window.addEventListener("touchcancel", this.bound_on_release, true);
+
+            //update postion on mouse press
             this.update_position(evt);
+
+            //prevent next events
+            evt.stopPropagation();
         }
 
         init() {
@@ -175,23 +214,19 @@
             this.bound_on_release = this.on_release.bind(this);
             this.on_bound_drag = this.on_drag.bind(this);
 
-            //init events
+            this.handle_elt.addEventListener("mousedown", this.bound_on_select);
             this.element.addEventListener("mousedown", this.bound_on_select);
             this.element.addEventListener("touchstart", this.bound_on_select);
-
+            //touch recognised as page drag without next command
+            document.body.addEventListener("touchstart", function(e){}, false);
+
+            //save ghost style
+            //save ghost style
             if(this.setpoint_elt != undefined){
                 this.setpoint_style = this.setpoint_elt.getAttribute("style");
                 this.setpoint_elt.setAttribute("style", "display:none");
             }
 
-
-            window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this));
-            window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this));
-
-            window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this))
-            window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this));
-            window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this));
-
         }
     }
     ||
@@ -199,6 +234,6 @@
 template "widget[@type='CircularSlider']", mode="widget_defs" {
     param "hmi_element";
     labels("handle range");
-    optional_labels("value min max");
+    optional_labels("value min max setpoint");
     |,
 }