diff --git a/js/ui/panel.js b/js/ui/panel.js
index fb808ce1e..cc9fd4d8b 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -379,7 +379,6 @@ class AggregateMenu extends PanelMenu.Button {
             this._network = null;
 
         this._volume = new imports.ui.status.volume.Indicator();
-        this._brightness = new imports.ui.status.brightness.Indicator();
         this._system = new imports.ui.status.system.Indicator();
 
         if (this._network)
@@ -387,7 +386,6 @@ class AggregateMenu extends PanelMenu.Button {
         this._indicators.add_child(this._volume);
 
         this.menu.addMenuItem(this._volume.menu);
-        this.menu.addMenuItem(this._brightness.menu);
         this.menu.addMenuItem(new PopupMenu.PopupSeparatorMenuItem());
         if (this._network)
             this.menu.addMenuItem(this._network.menu);
@@ -416,6 +414,7 @@ class QuickSettings extends PanelMenu.Button {
         else
             this._bluetooth = null;
 
+        this._brightness = new imports.ui.status.brightness.Indicator();
         this._remoteAccess = new imports.ui.status.remoteAccess.RemoteAccessApplet();
         this._location = new imports.ui.status.location.Indicator();
         this._thunderbolt = new imports.ui.status.thunderbolt.Indicator();
@@ -427,6 +426,7 @@ class QuickSettings extends PanelMenu.Button {
         this._unsafeMode = new UnsafeModeIndicator();
         this._power = new imports.ui.status.power.Indicator();
 
+        this._indicators.add_child(this._brightness);
         this._indicators.add_child(this._remoteAccess);
         this._indicators.add_child(this._thunderbolt);
         this._indicators.add_child(this._location);
@@ -440,6 +440,8 @@ class QuickSettings extends PanelMenu.Button {
         this._indicators.add_child(this._unsafeMode);
         this._indicators.add_child(this._power);
 
+        this._addItems(this._brightness.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
+
         this._addItems(this._remoteAccess.quickSettingsItems);
         this._addItems(this._thunderbolt.quickSettingsItems);
         this._addItems(this._location.quickSettingsItems);
diff --git a/js/ui/status/brightness.js b/js/ui/status/brightness.js
index 5a46c36ff..4c0da67d9 100644
--- a/js/ui/status/brightness.js
+++ b/js/ui/status/brightness.js
@@ -1,13 +1,11 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Indicator */
 
-const { Gio, GObject, St } = imports.gi;
+const {Gio, GObject} = imports.gi;
 
-const PanelMenu = imports.ui.panelMenu;
-const PopupMenu = imports.ui.popupMenu;
-const Slider = imports.ui.slider;
+const {QuickSlider, SystemIndicator} = imports.ui.quickSettings;
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+const {loadInterfaceXML} = imports.misc.fileUtils;
 
 const BUS_NAME = 'org.gnome.SettingsDaemon.Power';
 const OBJECT_PATH = '/org/gnome/SettingsDaemon/Power';
@@ -15,10 +13,13 @@ const OBJECT_PATH = '/org/gnome/SettingsDaemon/Power';
 const BrightnessInterface = loadInterfaceXML('org.gnome.SettingsDaemon.Power.Screen');
 const BrightnessProxy = Gio.DBusProxy.makeProxyWrapper(BrightnessInterface);
 
-var Indicator = GObject.registerClass(
-class Indicator extends PanelMenu.SystemIndicator {
+const BrightnessItem = GObject.registerClass(
+class BrightnessItem extends QuickSlider {
     _init() {
-        super._init();
+        super._init({
+            iconName: 'display-brightness-symbolic',
+        });
+
         this._proxy = new BrightnessProxy(Gio.DBus.session, BUS_NAME, OBJECT_PATH,
             (proxy, error) => {
                 if (error)
@@ -28,47 +29,36 @@ class Indicator extends PanelMenu.SystemIndicator {
                 this._sync();
             });
 
-        this._item = new PopupMenu.PopupBaseMenuItem({ activate: false });
-        this.menu.addMenuItem(this._item);
-
-        this._slider = new Slider.Slider(0);
-        this._sliderChangedId = this._slider.connect('notify::value',
+        this._sliderChangedId = this.slider.connect('notify::value',
             this._sliderChanged.bind(this));
-        this._slider.accessible_name = _("Brightness");
-
-        const icon = new St.Icon({
-            icon_name: 'display-brightness-symbolic',
-            style_class: 'popup-menu-icon',
-        });
-        this._item.add(icon);
-        this._item.add_child(this._slider);
-        this._item.connect('button-press-event', (actor, event) => {
-            return this._slider.startDragging(event);
-        });
-        this._item.connect('key-press-event', (actor, event) => {
-            return this._slider.emit('key-press-event', event);
-        });
-        this._item.connect('scroll-event', (actor, event) => {
-            return this._slider.emit('scroll-event', event);
-        });
+        this.slider.accessible_name = _('Brightness');
     }
 
     _sliderChanged() {
-        let percent = this._slider.value * 100;
+        const percent = this.slider.value * 100;
         this._proxy.Brightness = percent;
     }
 
     _changeSlider(value) {
-        this._slider.block_signal_handler(this._sliderChangedId);
-        this._slider.value = value;
-        this._slider.unblock_signal_handler(this._sliderChangedId);
+        this.slider.block_signal_handler(this._sliderChangedId);
+        this.slider.value = value;
+        this.slider.unblock_signal_handler(this._sliderChangedId);
     }
 
     _sync() {
         const brightness = this._proxy.Brightness;
         const visible = Number.isInteger(brightness) && brightness >= 0;
-        this._item.visible = visible;
+        this.visible = visible;
         if (visible)
             this._changeSlider(this._proxy.Brightness / 100.0);
     }
 });
+
+var Indicator = GObject.registerClass(
+class Indicator extends SystemIndicator {
+    _init() {
+        super._init();
+
+        this.quickSettingsItems.push(new BrightnessItem());
+    }
+});