Index: sources/gui/qml/components/RangeSlider.qml
===================================================================
diff -u -rcd4b8fbd5ea88717e74dd4cbe00dac82d9844dde -r514a0dd3f99af42040041b7033826d4a2d1192f1
--- sources/gui/qml/components/RangeSlider.qml	(.../RangeSlider.qml)	(revision cd4b8fbd5ea88717e74dd4cbe00dac82d9844dde)
+++ sources/gui/qml/components/RangeSlider.qml	(.../RangeSlider.qml)	(revision 514a0dd3f99af42040041b7033826d4a2d1192f1)
@@ -1,13 +1,13 @@
 /*!
  *
- * Copyright (c) 2020-2022 Diality Inc. - All Rights Reserved.
+ * Copyright (c) 2020-2023 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    RangeSlider.qml
  * \author  (last)      Behrouz NematiPour
- * \date    (last)      18-Jan-2022
+ * \date    (last)      23-Nov-2022
  * \author  (original)  Behrouz NematiPour
  * \date    (original)  17-Sep-2020
  *
@@ -46,10 +46,10 @@
     property bool   minVerticalEdgeVisible: true
 
     property int    gapValue    : 0                                 ///< the gap between minValue and maxValue so the minValue shall always be gap value less than maxValue and vise versa.
-    property real   minValueLowerBound    : _root.minimum           ///< min value cannot be lower  than this value
-    property real   minValueUpperBound    : _root.maximum           ///< min value cannot be higher than this value
-    property real   maxValueLowerBound    : _root.minimum           ///< max value cannot be lower  than this value
-    property real   maxValueUpperBound    : _root.maximum           ///< max value cannot be higher than this value
+    property real   minValueLowerBound    : 0
+    property real   minValueUpperBound    : 0
+    property real   maxValueLowerBound    : 0
+    property real   maxValueUpperBound    : 0
 
 
     property int    curHandler  : RangeSlider.HandlerOption.None    ///< current active slider handler
@@ -67,6 +67,9 @@
     property bool   maxAdjusted : false                             ///< first time user adjustment happens
     property bool   hasAdjust   : false                             ///< if set to true then component is grayed out until both min and max are adjusted
 
+    property bool showTickmarks     : true                          ///< Indicate whether tickMarks should be shown
+    property bool isTickMarksRound  : true                          ///< Indicate whether the tickmakrs are round
+
     onHasAdjustChanged  : {
         setAdjusted()
     }
@@ -79,36 +82,17 @@
 
     /// root attributes
     clip            :  false
+    color: Colors.transparent
 
     height          : Variables.progressbarHeight
     touchMargin     : 25
 
+    isRoundedEnds   : true
+    hasBorder       : true
+
     minimum         : 0
     maximum         : 0
 
-    /// real-time bound change should effect the current set value
-    onMinimumChanged: {
-        if ( minValueLowerBound < minimum ) { minValueLowerBound = minimum }
-        if ( maxValueLowerBound < minimum ) { maxValueLowerBound = minimum }
-    }
-    onMaximumChanged: {
-        if ( minValueUpperBound > maximum ) { minValueUpperBound = maximum }
-        if ( maxValueUpperBound > maximum ) { maxValueUpperBound = maximum }
-    }
-
-    onMinValueLowerBoundChanged: {
-        if ( minValue < minValueLowerBound ) { minValue = minValueLowerBound }
-    }
-    onMinValueUpperBoundChanged: {
-        if ( minValue > minValueUpperBound ) { minValue = minValueUpperBound }
-    }
-    onMaxValueLowerBoundChanged: {
-        if ( maxValue < maxValueLowerBound ) { maxValue = maxValueLowerBound }
-    }
-    onMaxValueUpperBoundChanged: {
-        if ( maxValue > maxValueUpperBound ) { maxValue = maxValueUpperBound }
-    }
-
     /// Lable of the minimum of range
     minText {
         visible          : true
@@ -130,7 +114,7 @@
     ///
     function setAdjusted() {
         function check() {
-            _rangeRect   .color = minAdjusted && maxAdjusted ? Colors.createTreatmentActive : Colors.createTreatmentInactive
+            _rangeRect   .color = minAdjusted && maxAdjusted ? Colors.sliderHighlightColor : Colors.createTreatmentInactive
             _handlerLeft .color = minAdjusted ? Colors.createTreatmentActive: Colors.createTreatmentInactive
             _handlerRight.color = maxAdjusted ? Colors.createTreatmentActive: Colors.createTreatmentInactive
         }
@@ -220,14 +204,14 @@
         }
     }
 
-    function checkLimitsMinValueBounds( vValue ) {
+    function checkLimitsMinValueBounds          ( vValue ) {
         curHandler = RangeSlider.HandlerOption.Min
         if ( vValue < minValueLowerBound ) { minValue = minValueLowerBound; return }
         if ( vValue > minValueUpperBound ) { minValue = minValueUpperBound; return }
         setMinvalue(vValue)
     }
 
-    function checkLimitsMaxValueBounds( vValue ) {
+    function checkLimitsMaxValueBounds          ( vValue ) {
         curHandler = RangeSlider.HandlerOption.Max
         if ( vValue < maxValueLowerBound ) { maxValue = maxValueLowerBound; return }
         if ( vValue > maxValueUpperBound ) { maxValue = maxValueUpperBound; return }
@@ -249,13 +233,13 @@
         property alias  lowerBound  : _rangeRect.minimum
         property alias  upperBound  : _rangeRect.maximum
         property real   minmaxDiff  : parent.maximum - parent.minimum
-
         x       : minmaxDiff ? ((parent.width * (lowerBound - parent.minimum)) / minmaxDiff) : minmaxDiff
         width   : minmaxDiff ? ((parent.width * (upperBound - lowerBound    )) / minmaxDiff) : minmaxDiff
         height  : parent.height
 
-        radius  : 0
         decimal : _root.decimal
+        isRoundedEnds   : _root.isRoundedEnds
+        hasBorder       : _root.hasBorder
 
         minText {
             visible: false
@@ -284,13 +268,20 @@
     Loader { id: _ticksLoader
         active          : _root.ticks
         anchors.fill    : parent
-        sourceComponent : TickMarks {
+        sourceComponent : _root.showTickmarks ? _tickMarkFactory : undefined
+    }
+
+    Component { id:_tickMarkFactory
+        TickMarks {
             decimal     : _root.decimal
             minimum     : _root.minimum
             maximum     : _root.maximum
             step        : _root.step
             stepSnap    : _root.stepSnap
             textColor   : _root.color
+            lineTickMarkHeight:  _rangeRect.height
+            isTickMarkRound : _root.isTickMarksRound
+            yDisplacement   : _root.isTickMarksRound ? (-_rangeRect.height) : 0
         }
     }