diff --git a/fxgl-scene/src/main/java/com/almasb/fxgl/ui/UIFactoryService.java b/fxgl-scene/src/main/java/com/almasb/fxgl/ui/UIFactoryService.java
index 1538743cb9..9b31d6ce52 100644
--- a/fxgl-scene/src/main/java/com/almasb/fxgl/ui/UIFactoryService.java
+++ b/fxgl-scene/src/main/java/com/almasb/fxgl/ui/UIFactoryService.java
@@ -56,6 +56,8 @@ public abstract class UIFactoryService extends EngineService {
 
     public abstract CheckBox newCheckBox();
 
+    public abstract Slider newSlider();
+
     public abstract <T> Spinner<T> newSpinner(ObservableList<T> items);
 
     public abstract <T> ListView<T> newListView(ObservableList<T> items);
diff --git a/fxgl-scene/src/main/kotlin/com/almasb/fxgl/ui/FXGLSlider.kt b/fxgl-scene/src/main/kotlin/com/almasb/fxgl/ui/FXGLSlider.kt
new file mode 100644
index 0000000000..c012adcdcf
--- /dev/null
+++ b/fxgl-scene/src/main/kotlin/com/almasb/fxgl/ui/FXGLSlider.kt
@@ -0,0 +1,44 @@
+/*
+ * FXGL - JavaFX Game Library. The MIT License (MIT).
+ * Copyright (c) AlmasB (almaslvl@gmail.com).
+ * See LICENSE for details.
+ */
+
+package com.almasb.fxgl.ui
+
+import javafx.scene.control.Slider
+import javafx.scene.effect.BoxBlur
+
+/**
+ *
+ * @author Almas Baimagambetov (almaslvl@gmail.com)
+ */
+class FXGLSlider : Slider() {
+
+    init {
+        styleClass.add("fxgl-slider")
+
+        effect = BoxBlur(1.2, 1.2, 2)
+
+        valueProperty().addListener { _, _, newValue ->
+            val percentage: Double = 100.0 * newValue.toDouble() / max
+
+            // solution from https://stackoverflow.com/questions/51343759/how-to-change-fill-color-of-slider-in-javafx
+            // in the String format,
+            // %1$.1f%% gives the first format argument ("1$"),
+            // i.e. percentage, formatted to 1 decimal place (".1f").
+            // Note literal % signs must be escaped ("%%")
+
+            val style = String.format(
+                    "-track-color: linear-gradient(to right, " +
+                    "-active-color 0.5%%, " +
+                    "-active-color %1$.1f%%, " +
+                    "-inactive-color %1$.1f%%, " +
+                    "-inactive-color 100%%);",
+                    percentage
+            )
+
+            setStyle(style)
+        }
+    }
+}
\ No newline at end of file
diff --git a/fxgl-scene/src/main/kotlin/com/almasb/fxgl/ui/FXGLUIFactoryServiceProvider.kt b/fxgl-scene/src/main/kotlin/com/almasb/fxgl/ui/FXGLUIFactoryServiceProvider.kt
index 8046784752..3d91f6b9e1 100644
--- a/fxgl-scene/src/main/kotlin/com/almasb/fxgl/ui/FXGLUIFactoryServiceProvider.kt
+++ b/fxgl-scene/src/main/kotlin/com/almasb/fxgl/ui/FXGLUIFactoryServiceProvider.kt
@@ -117,6 +117,10 @@ class FXGLUIFactoryServiceProvider : UIFactoryService() {
         return FXGLCheckBox()
     }
 
+    override fun newSlider(): Slider {
+        return FXGLSlider()
+    }
+
     override fun <T> newSpinner(items: ObservableList<T>): Spinner<T> {
         return FXGLSpinner(items).also {
             it.editor.fontProperty().bind(fontProperty(UI, 18.0))
diff --git a/fxgl/src/main/kotlin/com/almasb/fxgl/app/scene/FXGLDefaultMenu.kt b/fxgl/src/main/kotlin/com/almasb/fxgl/app/scene/FXGLDefaultMenu.kt
index d22ac2eadb..52363b8cdb 100644
--- a/fxgl/src/main/kotlin/com/almasb/fxgl/app/scene/FXGLDefaultMenu.kt
+++ b/fxgl/src/main/kotlin/com/almasb/fxgl/app/scene/FXGLDefaultMenu.kt
@@ -696,14 +696,18 @@ open class FXGLDefaultMenu(type: MenuType) : FXGLMenu(type) {
     protected fun createContentAudio(): MenuContent {
         log.debug("createContentAudio()")
 
-        val sliderMusic = Slider(0.0, 1.0, 1.0)
+        val sliderMusic = getUIFactoryService().newSlider()
+        sliderMusic.min = 0.0
+        sliderMusic.max = 1.0
         sliderMusic.valueProperty().bindBidirectional(getSettings().globalMusicVolumeProperty)
 
         val textMusic = getUIFactoryService().newText(localizedStringProperty("menu.music.volume").concat(": "))
         val percentMusic = getUIFactoryService().newText("")
         percentMusic.textProperty().bind(sliderMusic.valueProperty().multiply(100).asString("%.0f"))
 
-        val sliderSound = Slider(0.0, 1.0, 1.0)
+        val sliderSound = getUIFactoryService().newSlider()
+        sliderSound.min = 0.0
+        sliderSound.max = 1.0
         sliderSound.valueProperty().bindBidirectional(getSettings().globalSoundVolumeProperty)
 
         val textSound = getUIFactoryService().newText(localizedStringProperty("menu.sound.volume").concat(": "))
@@ -714,7 +718,7 @@ open class FXGLDefaultMenu(type: MenuType) : FXGLMenu(type) {
         gridPane.hgap = 15.0
         gridPane.addRow(0, textMusic, sliderMusic, percentMusic)
         gridPane.addRow(1, textSound, sliderSound, percentSound)
-        
+
         return MenuContent(gridPane)
     }
 
diff --git a/fxgl/src/main/resources/fxglassets/ui/css/fxgl_dark.css b/fxgl/src/main/resources/fxglassets/ui/css/fxgl_dark.css
index e56de8a5b2..8a2b5c63ec 100644
--- a/fxgl/src/main/resources/fxglassets/ui/css/fxgl_dark.css
+++ b/fxgl/src/main/resources/fxglassets/ui/css/fxgl_dark.css
@@ -278,6 +278,39 @@
 
 
 
+
+/**
+ * FXGL slider
+ */
+
+.fxgl-slider {
+    -active-color: gold;
+    -inactive-color: darkgray;
+    -track-color: -active-color;
+}
+
+.fxgl-slider .track,
+.fxgl-slider:vertical .track {
+    -fx-background-color: -track-color;
+    -fx-background-radius: 1;
+    -fx-background-insets: 0;
+    -fx-pref-width: 2px;
+    -fx-pref-height: 12px;
+}
+
+.fxgl-slider .thumb,
+.fxgl-slider:focused .thumb {
+    -fx-background-color: white;
+    -fx-background-radius: 20;
+    -fx-background-insets: 0;
+    -fx-border-radius: 7px;
+    -fx-border-width: 2px;
+    -fx-border-color: black;
+}
+
+
+
+
 /*
 From
 https://github.com/jfoenixadmin/JFoenix/blob/master/jfoenix/src/main/resources/css/controls/jfx-check-box.css