Index: sources/gui/qml/compounds/PressureRangeSlider.qml
===================================================================
diff -u -r8a5dbf556a66524fbe4b60ac1573182a0bd27617 -r2ef03b2ce51b4dc507f66e9671953a8e0824bde9
--- sources/gui/qml/compounds/PressureRangeSlider.qml	(.../PressureRangeSlider.qml)	(revision 8a5dbf556a66524fbe4b60ac1573182a0bd27617)
+++ sources/gui/qml/compounds/PressureRangeSlider.qml	(.../PressureRangeSlider.qml)	(revision 2ef03b2ce51b4dc507f66e9671953a8e0824bde9)
@@ -2,16 +2,16 @@
 
 /*!
  *
- * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
+ * Copyright (c) 2020-2024 Diality Inc. - All Rights Reserved.
  * \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 PressureRangeSlider.qml
+ * \file    PressureRangeSlider.qml
  * \author  (last)      Behrouz NematiPour
- * \date    (last)      11-Oct-2020
+ * \date    (last)      13-Sep-2023
  * \author  (original)  Behrouz NematiPour
- * \date    (original)  11-Oct-2020
+ * \date    (original)  12-Oct-2020
  *
  */
 
@@ -52,7 +52,7 @@
      step          : minimum space/movement between each range slider values
    \endverbatim
  */
-Row { id: _root
+Item { id: _root
     property real   minimum       :  0      ///< the minimum value of the range (adjustable slider might be different regarding the minimumMargin) 
     property real   minimumMargin :  0      ///< the margin of the adjustable minimum value from the minimm
     property real   lowerBoundMin :  0      ///< the adjutable lowerband minimum acceptable value
@@ -67,32 +67,41 @@
     property real   step          : 10      ///< minimum space/movement between each range slider values
     property int    limitGap      :  0      ///< the closest the two of lowerBound and upperBound can get.
 
-    property bool   ticksVisible  : false   ///< hide or show the tick marks help of the step
+    property alias  ticksVisible  : _pressureSlider.ticks ///< hide or show the tick marks help of the step
 
     property string titleText           : ""                                    ///< the component title
     property string titleUnit           : Variables.unitTextBloodPressure       ///< the component unit
     property int    titleFontSize       : Fonts.fontPixelPresseuresLabel        ///< the component title font size
-    property int    titleWidth          : 200                                   ///< the component title width
+    property int    titleWidth          : 150                                   ///< the component title width
 
     property int    progressWidth       : Variables.pressuresProgressbarWidth   ///< rangebar width
     property color  progressColor       : Colors.highlightProgressBar           ///< rangebar color
 
     property int    sliderTopMargin     : 100                                   ///< top margin between the slider and the rangebar
 
-    spacing: 25
+    width   : parent.width
+    height  : 200
 
     TextRect { id: _pressureTextRect
         anchors.top: parent.top
+        height:50
         width: titleWidth
-        label: _root.titleText
+        title: _root.titleText
         extra: _root.titleUnit
+        labelFont.weight: Font.ExtraLight
         labelFont.pixelSize: _root.titleFontSize
+        extraLabelPixelSize: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 30
     }
 
     Rectangle { id: _pressureRect
+        anchors.top: parent.top
+        anchors.topMargin: _pressureTextRect.height
+        anchors.left: parent.left
+        anchors.leftMargin: _maxHandleArrows.width + _pressureSlider.maxText.width
         width   : _root.progressWidth
-        height: 10
-        color: Colors.transparent
+        color   : Colors.transparent
 
         property int  minMargin: _root.minimumMargin
         property int  maxMargin: _root.maximumMargin
@@ -137,8 +146,6 @@
             onUpperBoundChanged: {
                 _pressureSlider.maxValue = upperBound
             }
-
-            markerOutRangeNotify    : true
         }
         RangeSlider { id: _pressureSlider
             anchors {
@@ -150,12 +157,12 @@
                 rightMargin : _pressureRangeBar.maxDiff
             }
 
-            height  : 5
-            diameter: Variables.sliderCircleDiameter
-
             decimal : 1
-            bgColor : Colors.pressuresOutOfRaneBg
+            bgColor : Colors.pressuresOutOfRangeBg
+            enabledBorderColor: Colors.pressureBorderActive
 
+            hasAdjust    : true // imply that both handle need to be adjusted to mark as active
+
             minText {
                 text : qsTr("LOW")
                 font.bold: true
@@ -191,14 +198,33 @@
 
             unit    : Variables.unitTextBloodPressure
             step    : _root.step
-            ticks   : _root.ticksVisible
 
+            // The min/max edge line markers' visibility
+            minVerticalEdgeVisible: false
+            maxVerticalEdgeVisible: false
+
             onMinValueChanged: {
                 lowerBound = minValue
             }
             onMaxValueChanged: {
                 upperBound = maxValue
             }
         }
+
+        SliderArrows{ id:_maxHandleArrows
+            anchors.verticalCenter  : _pressureSlider.verticalCenter
+            anchors.left            : _pressureRangeBar.right
+            anchors.leftMargin      : Variables.sliderAdjustButtonLeftMargin + _pressureSlider.maxText.width
+            onIncrementValue        : _pressureSlider.incrementMax(true)
+            onDecrementValue        : _pressureSlider.decrementMax(true)
+        }
+
+        SliderArrows{ id:_minHandleArrows
+            anchors.verticalCenter  : _pressureSlider.verticalCenter
+            anchors.right           : _pressureRangeBar.left
+            anchors.rightMargin     : 10
+            onIncrementValue        : _pressureSlider.incrementMin(true)
+            onDecrementValue        : _pressureSlider.decrementMin(true)
+        }
     }
 }