diff --git a/js/ui/barLevel.js b/js/ui/barLevel.js
index 8ff648c17..1b4b7f940 100644
--- a/js/ui/barLevel.js
+++ b/js/ui/barLevel.js
@@ -259,6 +259,26 @@ export const BarLevel = GObject.registerClass({
         cr.$dispose();
     }
 
+    vfunc_get_preferred_height(_forWidth) {
+        const themeNode = this.get_theme_node();
+        const height = this._getPreferredHeight();
+        return themeNode.adjust_preferred_height(height, height);
+    }
+
+    vfunc_get_preferred_width(_forHeight) {
+        const themeNode = this.get_theme_node();
+        const width = this._getPreferredWidth();
+        return themeNode.adjust_preferred_width(width, width);
+    }
+
+    _getPreferredHeight() {
+        return this._barLevelHeight + this._barLevelBorderWidth;
+    }
+
+    _getPreferredWidth() {
+        return this._overdriveSeparatorWidth + this._barLevelBorderWidth;
+    }
+
     _getCurrentValue() {
         return this._value;
     }
diff --git a/js/ui/slider.js b/js/ui/slider.js
index f154cea40..69288e7c6 100644
--- a/js/ui/slider.js
+++ b/js/ui/slider.js
@@ -75,6 +75,18 @@ export const Slider = GObject.registerClass({
         cr.$dispose();
     }
 
+    _getPreferredHeight() {
+        const barHeight = super._getPreferredHeight();
+        const handleHeight = 2 * this._handleRadius + this._handleBorderWidth;
+        return Math.max(barHeight, handleHeight);
+    }
+
+    _getPreferredWidth() {
+        const barWidth = super._getPreferredWidth();
+        const handleWidth = 2 * this._handleRadius + this._handleBorderWidth;
+        return Math.max(barWidth, handleWidth);
+    }
+
     vfunc_button_press_event(event) {
         return this.startDragging(event);
     }