diff --git a/es-core/src/components/SliderComponent.cpp b/es-core/src/components/SliderComponent.cpp
index 23c5ae7d8..62723d38f 100644
--- a/es-core/src/components/SliderComponent.cpp
+++ b/es-core/src/components/SliderComponent.cpp
@@ -29,15 +29,22 @@ SliderComponent::SliderComponent(float min, float max, float increment, const st
     // Some sane default value.
     mValue = (max + min) / 2.0f;
 
-    mKnob.setOrigin(0.5f, 0.5f);
+    mKnob.setOrigin(0.5f, 0.0f);
     mKnob.setImage(":/graphics/slider_knob.svg");
 
+    mKnobDisabled.setOrigin(0.5f, 0.0f);
+    mKnobDisabled.setImage(":/graphics/slider_knob_disabled.svg");
+
     setSize(mWindow->peekGui()->getSize().x * 0.26f,
             Font::get(FONT_SIZE_MEDIUM)->getLetterHeight());
 }
 
 bool SliderComponent::input(InputConfig* config, Input input)
 {
+    // Ignore input if the component has been disabled.
+    if (!mEnabled)
+        return false;
+
     if (input.value != 0) {
         if (config->isMappedLike("left", input)) {
             if (input.value)
@@ -97,10 +104,14 @@ void SliderComponent::render(const glm::mat4& parentTrans)
     if (mTextCache)
         mFont->renderTextCache(mTextCache.get());
 
-    mRenderer->drawRect(mKnob.getSize().x / 2.0f, mBarPosY, width, mBarHeight, 0x777777FF,
-                        0x777777FF);
+    mRenderer->drawRect(mKnob.getSize().x / 2.0f, mBarPosY, width, mBarHeight,
+                        0x77777700 | static_cast<unsigned int>(mOpacity * 255.0f),
+                        0x77777700 | static_cast<unsigned int>(mOpacity * 255.0f));
 
-    mKnob.render(trans);
+    if (mOpacity > DISABLED_OPACITY)
+        mKnob.render(trans);
+    else
+        mKnobDisabled.render(trans);
 
     GuiComponent::renderChildren(trans);
 }
@@ -118,9 +129,7 @@ void SliderComponent::setValue(float value)
 
 void SliderComponent::onSizeChanged()
 {
-    if (!mSuffix.empty())
-        mFont = Font::get(mSize.y, FONT_PATH_LIGHT);
-
+    mFont = Font::get(mSize.y, FONT_PATH_LIGHT);
     onValueChanged();
 }
 
@@ -183,11 +192,16 @@ void SliderComponent::onValueChanged()
     // For smooth outer boundaries.
     // const float val {glm::smoothstep(mMin, mMax, mValue)};
 
-    mKnob.setOrigin(glm::vec2 {0.5f, 0.0f});
     const float posY {(mSize.y - mKnob.getSize().y) / 2.0f};
     mKnob.setPosition(val * barLength + mKnob.getSize().x / 2.0f, posY);
 
+    mKnobDisabled.setResize(mKnob.getSize());
+    mKnobDisabled.setPosition(mKnob.getPosition());
+
     mBarPosY = (mSize.y - mBarHeight) / 2.0f;
+
+    if (mChangedValueCallback)
+        mChangedValueCallback();
 }
 
 std::vector<HelpPrompt> SliderComponent::getHelpPrompts()
diff --git a/es-core/src/components/SliderComponent.h b/es-core/src/components/SliderComponent.h
index 533c511f0..e7e570913 100644
--- a/es-core/src/components/SliderComponent.h
+++ b/es-core/src/components/SliderComponent.h
@@ -11,9 +11,7 @@
 
 #include "GuiComponent.h"
 #include "components/ImageComponent.h"
-
-class Font;
-class TextCache;
+#include "resources/Font.h"
 
 // Slider to set value in a predefined range.
 class SliderComponent : public GuiComponent
@@ -26,6 +24,11 @@ public:
     // an optional unit.
     SliderComponent(float min, float max, float increment, const std::string& suffix = "");
 
+    void setCallback(const std::function<void()>& callbackFunc)
+    {
+        mChangedValueCallback = callbackFunc;
+    }
+
     void setValue(float value);
     float getValue() { return mValue; }
 
@@ -34,6 +37,12 @@ public:
     void render(const glm::mat4& parentTrans) override;
 
     void onSizeChanged() override;
+    void setOpacity(float opacity) override
+    {
+        mOpacity = opacity;
+        mKnob.setOpacity(opacity);
+        mTextCache->setOpacity(opacity);
+    }
 
     std::vector<HelpPrompt> getHelpPrompts() override;
 
@@ -50,10 +59,12 @@ private:
     int mMoveAccumulator;
 
     ImageComponent mKnob;
+    ImageComponent mKnobDisabled;
 
     std::string mSuffix;
     std::shared_ptr<Font> mFont;
     std::shared_ptr<TextCache> mTextCache;
+    std::function<void()> mChangedValueCallback;
 };
 
 #endif // ES_CORE_COMPONENTS_SLIDER_COMPONENT_H
diff --git a/resources/graphics/slider_knob_disabled.svg b/resources/graphics/slider_knob_disabled.svg
new file mode 100644
index 000000000..968eafa19
--- /dev/null
+++ b/resources/graphics/slider_knob_disabled.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="64"
+   height="64"
+   version="1.1"
+   viewBox="0 0 64 64"
+   id="svg4"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <circle
+     cx="32"
+     cy="32"
+     r="32"
+     fill="#777"
+     id="circle2"
+     style="fill:#c9c9c9;fill-opacity:1" />
+</svg>