Index: sources/gui/qml/components/Slider.qml
===================================================================
diff -u -rf148379112a69d1c52027f2667e95f3f96d948ad -r56e378f7504701b9e9a9dccaf205aef2fd52c58e
--- sources/gui/qml/components/Slider.qml	(.../Slider.qml)	(revision f148379112a69d1c52027f2667e95f3f96d948ad)
+++ sources/gui/qml/components/Slider.qml	(.../Slider.qml)	(revision 56e378f7504701b9e9a9dccaf205aef2fd52c58e)
@@ -1,14 +1,15 @@
 /*!
  *
  * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
- * \copyright                                                       \n
- *          THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM,  \n
- *          IN PART OR IN WHOLE,                                    \n
- *          WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER. \n
+ * \copyright
+ * THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM, IN PART OR IN
+ * WHOLE, WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER.
  *
- * \file    Slider.qml
- * \date    2020/03/13
- * \author  Behrouz NematiPour
+ * \file Slider.qml
+ * \author (last) Behrouz NemaiPour
+ * \date (last) 04-Jun-2020
+ * \author (original) Behrouz NematiPour
+ * \date (original) 18-Mar-2020
  *
  */
 
@@ -24,20 +25,34 @@
  */
 RangeRect { id: _root
     property alias  value       : _progressRect.value
-    property int    step        : 1
+
+    property real   step        : 1
+    property bool   stepSnap    : false
+
     property bool   ticks       : false
 
     property alias  color       : _progressRect.color
     property alias  bgColor     : _root.color
 
-    property real   handlerWidth: 35
+    property alias  handler     : _handler
 
+
     height          : Variables.progressbarHeight
     touchMargin     : 25
 
     minimum         : 0
     maximum         : 0
 
+    // real-time bound change should effect the current set value
+    onMinimumChanged: {
+        if (value < minimum )
+            value = minimum
+    }
+    onMaximumChanged: {
+        if (value > maximum )
+            value = maximum
+    }
+
     minText {
         visible          : true
         anchors.topMargin: Variables.sliderTextMargin
@@ -51,32 +66,35 @@
         font.bold        : false
     }
 
-    function getPosition(x) {
+    function getValueOfX(x) {
         return ( x * ( maximum - minimum ) ) / width + minimum
     }
 
     function setValue(x) {
-        if ( x < 0     ) {
-            value = minimum
-        } else
-        if ( x > width ) {
-            value = maximum
-        } else
-        if (step === 1) { // only for performance otherwise formula works perfectly fine for any step.
-            value = getPosition(x)
-        } else {
-            value = Math.round((getPosition(x) - minimum) / step) * step + minimum
-        }
+        if ( x <     0 ) { value = minimum;                             return; }
+        if ( x > width ) { value = maximum;                             return; }
+
+        value = getValueOfX(x)
+
+        if ( step === 1 ) { /* keep the value and return */             return; }
+
+        var start = 0
+        if ( ! stepSnap ) start = minimum
+
+        value = Math.round((value - start) / step) * step + start
+
+        if ( value < minimum ) { value = minimum;                       return; }
+        if ( value > maximum ) { value = maximum;                       return; }
     }
 
     ProgressRect { id: _progressRect
         color       : Colors.highlightProgressBar
         touchMargin : parent.touchMargin
+        decimal : _root.decimal
+        minimum : _root.minimum
+        maximum : _root.maximum
 
-        minimum : parent.minimum
-        maximum : parent.maximum
-
-        // propagation is not working on drag
+        // propagation is not working on drag !
         onDragged: {
             setValue(vMouseEvent.x)
         }
@@ -91,9 +109,12 @@
         active          : ticks
         anchors.fill    : parent
         sourceComponent : TickMarks {
+            decimal     : _root.decimal
             minimum     : _root.minimum
             maximum     : _root.maximum
             step        : _root.step
+            stepSnap    : _root.stepSnap
+            textColor   : _root.color
         }
     }
 
@@ -105,18 +126,18 @@
     }
 
     Rectangle { id: _handler
-        property real diameter  : parent.handlerWidth
+        property real diameter  : Variables.progressbarHandler
 
         anchors.verticalCenter  : parent.verticalCenter
         anchors.horizontalCenter: _progressRect.right
 
         width   : diameter
         height  : diameter
         radius  : diameter
-        color   : "white"
+        color   : Colors.highlightProgressBar
         border  {
             width: 4
-            color: Colors.highlightProgressBar
+            color: "white"
         }
     }
 }