diff --git a/atomic_defi_design/Dex/Components/DefaultRangeSlider.qml b/atomic_defi_design/Dex/Components/DefaultRangeSlider.qml
index 8cda0a3363..390e62c0fd 100644
--- a/atomic_defi_design/Dex/Components/DefaultRangeSlider.qml
+++ b/atomic_defi_design/Dex/Components/DefaultRangeSlider.qml
@@ -34,14 +34,14 @@ RangeSlider
         width: control.availableWidth
         height: implicitHeight
         radius: 2
-        color: Dex.CurrentTheme.rangeSliderDistanceColor
+        color: control.rangeDistanceColor
 
         Rectangle
         {
             x: control.first.visualPosition * parent.width
             width: control.second.visualPosition * parent.width - x
             height: parent.height
-            color: Dex.CurrentTheme.rangeSliderBackgroundColor
+            color: control.rangeBackgroundColor
             radius: 2
         }
     }
diff --git a/atomic_defi_design/Dex/Components/DefaultSlider.qml b/atomic_defi_design/Dex/Components/DefaultSlider.qml
index e043ba8dda..e5a21c7154 100644
--- a/atomic_defi_design/Dex/Components/DefaultSlider.qml
+++ b/atomic_defi_design/Dex/Components/DefaultSlider.qml
@@ -1,8 +1,48 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+
 import "../Constants"
 import App 1.0
+import Dex.Themes 1.0 as Dex
+
+Slider
+{
+    id: control
+    value: 0.5
+    opacity: enabled ? 1 : .5
+
+    background: Rectangle
+    {
+        x: control.leftPadding
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 200
+        implicitHeight: 4
+        width: control.availableWidth
+        height: implicitHeight
+        radius: 2
+        color: Dex.CurrentTheme.rangeSliderDistanceColor
 
-DexSlider {
+        Rectangle
+        {
+            width: control.visualPosition * parent.width
+            height: parent.height
+            color: Dex.CurrentTheme.rangeSliderBackgroundColor
+            radius: 2
+        }
+    }
 
+    handle: Rectangle
+    {
+        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 26
+        implicitHeight: 26
+        radius: 13
+        gradient: Gradient
+        {
+            orientation: Gradient.Horizontal
+            GradientStop { position: 0.125; color: Dex.CurrentTheme.rangeSliderIndicatorBackgroundStartColor }
+            GradientStop { position: 0.925; color: Dex.CurrentTheme.rangeSliderIndicatorBackgroundEndColor }
+        }
+    }
 }
diff --git a/atomic_defi_design/Dex/Components/DexSlider.qml b/atomic_defi_design/Dex/Components/DexSlider.qml
deleted file mode 100644
index be3dfc714d..0000000000
--- a/atomic_defi_design/Dex/Components/DexSlider.qml
+++ /dev/null
@@ -1,41 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import "../Constants"
-import App 1.0
-Slider {
-    id: control
-    value: 0.5
-    opacity: enabled ? 1 : .5
-
-    background: Rectangle {
-        x: control.leftPadding
-        y: control.topPadding + control.availableHeight / 2 - height / 2
-        implicitWidth: 200
-        implicitHeight: 4
-        width: control.availableWidth
-        height: implicitHeight
-        radius: 2
-        color: "#bdbebf"
-
-        Rectangle {
-            width: control.visualPosition * parent.width
-            height: parent.height
-            color: DexTheme.accentColor
-            radius: 2
-        }
-    }
-    handle: FloatingBackground {
-        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
-        y: control.topPadding + control.availableHeight / 2 - height / 2
-        implicitWidth: 26
-        implicitHeight: 26
-        radius: 13
-        Rectangle {
-            anchors.centerIn: parent
-            width: 10
-            height: 10
-            radius: 10
-            color: DexTheme.accentColor
-        }
-    }
-}
\ No newline at end of file