--- a/svghmi/widget_slider.ysl2	Tue Oct 20 00:23:52 2020 +0200
+++ b/svghmi/widget_slider.ysl2	Tue Oct 20 00:24:49 2020 +0200
@@ -6,7 +6,9 @@
         frequency = 5;
         range = undefined;
         handle_orig = undefined;
-        scroll_size = 10;
+        scroll_size = undefined;
+        scroll_range = 0;
+        scroll_visible = 7;
         min_size = 0.07;
         fi = undefined;
         curr_value = 0;
@@ -15,16 +17,51 @@
         handle_click = undefined;
         last_drag = false;
 
-        dispatch(value) {
-            //save current value inside widget
-            this.curr_value = value;
-
-            if(this.value_elt)
-                this.value_elt.textContent = String(value);
+        dispatch(value,oldval, index) {
+            if (index == 0){
+                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);
+            }
+            else if(index == 1){
+                this.scroll_range = value;
+                this.set_scroll();
+            }
+            else if(index == 2){
+                this.scroll_visible = value;
+                this.set_scroll();
+            }
 
             //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);
+                this.update_DOM(this.curr_value, this.handle_elt);
+            }
+        }
+
+        set_scroll(){
+            //check if range is bigger than visible and set scroll size
+            if(this.scroll_range > this.scroll_visible){
+                this.scroll_size = this.scroll_range - this.scroll_visible;
+                this.range[0] = 0;
+                this.range[1] = this.scroll_size;
+            }
+            else{
+                this.scroll_size = 1;
+                this.range[0] = 0;
+                this.range[1] = 1;
             }
         }
 
@@ -101,7 +138,7 @@
             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("mouseup", this.bound_on_release, true);
             window.removeEventListener("touchend", this.bound_on_release, true);
             window.removeEventListener("touchcancel", this.bound_on_release, true);
 
@@ -197,14 +234,13 @@
                 this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]);
             }
 
-            //check if in range
+            //check if in range and apply
             if (this.curr_value > max){
                 this.curr_value = max;
             }
             else if (this.curr_value < min){
                 this.curr_value = min;
             }
-
             this.apply_hmi_value(0, this.curr_value);
 
             //redraw handle
@@ -232,7 +268,7 @@
             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);
 
@@ -260,7 +296,9 @@
 
             //prevent next events
             evt.stopPropagation();
-        }
+
+        }
+
 
         init() {
             //set min max value if not defined
@@ -271,6 +309,7 @@
                         Number(this.max_elt.textContent) :
                         this.args.length >= 2 ? this.args[1] : 100;
 
+
             // save initial parameters
             this.range_elt.style.strokeMiterlimit="0";
             this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()];
@@ -287,7 +326,10 @@
             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
             if(this.setpoint_elt != undefined){
                 this.setpoint_style = this.setpoint_elt.getAttribute("style");
                 this.setpoint_elt.setAttribute("style", "display:none");