Index: sources/gui/qml/components/RangeSlider.qml
===================================================================
diff -u -rf68b226e67eb500758ee94fe015df48931240013 -r514a0dd3f99af42040041b7033826d4a2d1192f1
--- sources/gui/qml/components/RangeSlider.qml	(.../RangeSlider.qml)	(revision f68b226e67eb500758ee94fe015df48931240013)
+++ 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)      25-Oct-2022
+ * \date    (last)      23-Nov-2022
  * \author  (original)  Behrouz NematiPour
  * \date    (original)  17-Sep-2020
  *
@@ -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,10 +82,14 @@
 
     /// root attributes
     clip            :  false
+    color: Colors.transparent
 
     height          : Variables.progressbarHeight
     touchMargin     : 25
 
+    isRoundedEnds   : true
+    hasBorder       : true
+
     minimum         : 0
     maximum         : 0
 
@@ -107,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
         }
@@ -226,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
@@ -261,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
         }
     }