Index: sources/gui/qml/components/RangeSlider.qml
===================================================================
diff -u -rc9f8f8cf3c6c37fc6460d8675c62c9442c4d4263 -r2b16e255a35e0f716bfa9d6943b35e4199dcf3b0
--- sources/gui/qml/components/RangeSlider.qml	(.../RangeSlider.qml)	(revision c9f8f8cf3c6c37fc6460d8675c62c9442c4d4263)
+++ sources/gui/qml/components/RangeSlider.qml	(.../RangeSlider.qml)	(revision 2b16e255a35e0f716bfa9d6943b35e4199dcf3b0)
@@ -82,6 +82,7 @@
 
     height          : Variables.progressbarHeight
     touchMargin     : 25
+    leftRightTouchMargin: _root.diameter / 2
 
     minimum         : 0
     maximum         : 0
@@ -142,6 +143,7 @@
     /// \param   x : the active slider x cordinate.
     ///
     function setValue(x) {
+
         let mValue = 0
         if ( x <     0 ) { mValue = minimum;         return mValue; }
         if ( x > width ) { mValue = maximum;         return mValue; }
@@ -167,7 +169,13 @@
     /// \details    regarding the current mouse x position selects the correct handler and updated the bound value.
     /// \param      x : mouse x position.
     function setBound(x) {
+        if(curHandler === RangeSlider.HandlerOption.None) {
+            // The user did not select a handle
+            return
+        }
+
         let mValue = setValue(x)
+
         // console.debug( maxValue - minValue, minValue, value, maxValue )
         if ( maxValue - minValue <= gapValue ) {
             // max correction if the values get too close together less than defined gap
@@ -180,32 +188,37 @@
 
         let minDiff = Math.abs(minValue - mValue)
         let maxDiff = Math.abs(maxValue - mValue)
+
         if ( minDiff === maxDiff ) {
             if ( curHandler === RangeSlider.HandlerOption.Max ) checkLimitsMaxValueBounds(mValue)
-            else                                                checkLimitsMinValueBounds(mValue)
+                                                           else checkLimitsMinValueBounds(mValue)
         }
         else {
-            // console.debug( minDiff, minValue, value, maxValue, maxDiff )
-            if ( minDiff < maxDiff ) {
-                // if (minDiff > limitGap) return // not sure if it needs but kept it as an idea.
-                checkLimitsMinValueBounds(mValue)
+            if ( minAdjusted && maxAdjusted ) {
+                // min and max have been adjust initially
+                if ( minDiff < maxDiff ) {
+                    // if (minDiff > limitGap) return // not sure if it needs but kept it as an idea.
+                    checkLimitsMinValueBounds(mValue)
+                }
+                else {
+                    // if (maxDiff > limitGap) return // not sure if it needs but kept it as an idea.
+                    checkLimitsMaxValueBounds(mValue)
+                }
+            } else {
+                // if only one handle side is selected, adjust according to the selected
+                if ( curHandler === RangeSlider.HandlerOption.Max ) checkLimitsMaxValueBounds(mValue)
+                if ( curHandler === RangeSlider.HandlerOption.Min ) checkLimitsMinValueBounds(mValue)
             }
-            else {
-                // if (maxDiff > limitGap) return // not sure if it needs but kept it as an idea.
-                checkLimitsMaxValueBounds(mValue)
-            }
         }
     }
 
     function checkLimitsMinValueBounds          ( vValue ) {
-        curHandler = RangeSlider.HandlerOption.Min
         if ( vValue < minValueLowerBound ) { minValue = minValueLowerBound; return }
         if ( vValue > minValueUpperBound ) { minValue = minValueUpperBound; return }
         setMinvalue(vValue)
     }
 
     function checkLimitsMaxValueBounds          ( vValue ) {
-        curHandler = RangeSlider.HandlerOption.Max
         if ( vValue < maxValueLowerBound ) { maxValue = maxValueLowerBound; return }
         if ( vValue > maxValueUpperBound ) { maxValue = maxValueUpperBound; return }
         setMaxValue(vValue)
@@ -226,6 +239,7 @@
         property alias  lowerBound  : _rangeRect.minimum
         property alias  upperBound  : _rangeRect.maximum
         property real   minmaxDiff  : parent.maximum - parent.minimum
+        leftRightTouchMargin: _root.diameter / 2
 
         x       : minmaxDiff ? ((parent.width * (lowerBound - parent.minimum)) / minmaxDiff) : minmaxDiff
         width   : minmaxDiff ? ((parent.width * (upperBound - lowerBound    )) / minmaxDiff) : minmaxDiff
@@ -246,12 +260,15 @@
         // propagation is not working on drag !
         // so it has to be implemented here as well
         onDragged: {
-            setBound(vMouseEvent.x + _rangeRect.x)
-            _root.clicked(vMouseEvent)
+            // Add in the x position of the range rect to account for it moving on the
+            // main slider line and the displacement of the touch margin increase
+            setBound(vMouseEvent.x + _rangeRect.x - _rangeRect.leftRightTouchMargin)
         }
-        onClicked: {
-            setBound(vMouseEvent.x + _rangeRect.x)
-            _root.clicked(vMouseEvent)
+
+        onReleased: {
+            // Add in the x position of the range rect to account for it moving on the
+            // main slider line and the displacement of the touch margin increase
+            setBound(vMouseEvent.x + _rangeRect.x - _rangeRect.leftRightTouchMargin)
         }
     }
 
@@ -272,10 +289,13 @@
     }
 
     onDragged: {
-        setBound(vMouseEvent.x)
+        // Need to account for the extended touch areas
+        setBound(vMouseEvent.x - _rangeRect.leftRightTouchMargin)
     }
-    onClicked: {
-        setBound(vMouseEvent.x)
+
+    onReleased: {
+        // Need to account for the extended touch areas
+        setBound(vMouseEvent.x - _rangeRect.leftRightTouchMargin)
     }
 
     /// Left most maximum range vertical edge
@@ -302,7 +322,7 @@
 
     /// Left most handler
     Rectangle { id: _handlerLeft
-        property real diameter  : _root.diameter
+        property real diameter          : _root.diameter
 
         anchors.verticalCenter  : parent.verticalCenter
         anchors.horizontalCenter: _rangeRect.left
@@ -315,11 +335,24 @@
             width   : 4
             color   : Colors.textMain
         }
+        MouseArea { id: _leftHandleMouseArea
+            propagateComposedEvents: true // propagate the click to the lower layer
+            anchors.fill: parent
+            onPressed: {
+                mouse.accepted = false // indicate that the current component did not handle the mouse action, propagate
+                _root.curHandler = RangeSlider.HandlerOption.Min
+            }
+
+            onReleased: {
+                mouse.accepted = false // indicate that the current component did not handle the mouse action, propagate
+                _root.curHandler = RangeSlider.HandlerOption.None
+            }
+        }
     }
 
     /// Right most handler
     Rectangle { id: _handlerRight
-        property real diameter      : _root.diameter
+        property real diameter          : _root.diameter
 
         anchors.verticalCenter      : parent.verticalCenter
         anchors.horizontalCenter    : _rangeRect.right
@@ -332,5 +365,18 @@
             width   : 4
             color   : Colors.textMain
         }
+        MouseArea { id: _rightHandlerMouseArea
+            propagateComposedEvents: true // propagate the click to the lower layer
+            anchors.fill: parent
+
+            onPressed:{
+                mouse.accepted = false // indicate that the current component did not handle the mouse action, propagate
+                _root.curHandler = RangeSlider.HandlerOption.Max
+            }
+            onReleased: {
+                mouse.accepted = false // indicate that the current component did not handle the mouse action, propagate
+                _root.curHandler = RangeSlider.HandlerOption.None
+            }
+        }
     }
 }