Index: sources/gui/qml/components/Slider.qml
===================================================================
diff -u -r4bba3aba944dd3a5461796e4f7a31d166dca42e0 -r2f0b2e204b42597e08be24df48a3b3d470b73051
--- sources/gui/qml/components/Slider.qml	(.../Slider.qml)	(revision 4bba3aba944dd3a5461796e4f7a31d166dca42e0)
+++ sources/gui/qml/components/Slider.qml	(.../Slider.qml)	(revision 2f0b2e204b42597e08be24df48a3b3d470b73051)
@@ -33,6 +33,7 @@
 
     property bool   ticks              : false
 
+    // TODO  suggest to BN that we should rename color to progressBarBgColor because slider's rangeRect has a color property also
     property alias  color              : _progressRect.color
     property alias  bgColor            : _root.color
 
@@ -91,10 +92,10 @@
 
     function setActive(active) {
         if (active) {
-            color = Colors.createTreatmentActive
+            color        = Colors.sliderHighlightColor
             handlerColor = Colors.createTreatmentActive
         } else {
-            color = Colors.createTreatmentInactive
+            color        = Colors.createTreatmentInactive
             handlerColor = Colors.createTreatmentInactive
         }
     }
@@ -203,15 +204,33 @@
                                    return mValue;
     }
 
+    // used loader for performance since it may not always be required.
+    // and can be a heavy Component
+    Loader { id: _ticksLoader
+        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
+            lineTickMarkHeight      : _progressRect.height
+            lineTickMarkThickness   : _root.tickMarksThickness
+            isTickMarkRound : _root.isRoundedEnds
+            yDisplacement   : _root.isRoundedEnds ? (-_progressRect.height) : 0
+        }
+    }
     ProgressRect { id: _progressRect
         property real previousSliderValue: Number.NaN
-        color   : Colors.highlightProgressBar
+        color   : Colors.transparent
         decimal : _root.decimal
         minimum : _root.minimum
         maximum : _root.maximum
-        height: 5
 
-        leftRightTouchMargin: _handler.width/2
+        isRoundedEnds       : _root.isRoundedEnds
+        hasBorder           : _root.hasBorder
 
         // propagation is not working on drag !
         onDragged: {
@@ -225,22 +244,6 @@
         }
     }
 
-    // used loader for performance since it may not always be required.
-    // and can be a heavy Component
-    Loader { id: _ticksLoader
-        active          : ticks
-        anchors.fill    : parent
-        sourceComponent : TickMarks {
-            thickness   : _root.tickMarksThickness
-            decimal     : _root.decimal
-            minimum     : _root.minimum
-            maximum     : _root.maximum
-            step        : _root.step
-            stepSnap    : _root.stepSnap
-            textColor   : _root.color
-        }
-    }
-
     function updateHandleValue(vCurrentPositionX)
     {
         // Passing false for snapping to get exact value in respect to x