How to add a slider to a gnome shell extension?

Question

I am trying to add a slider to my extension's indicator, like they do in the sound chooser for example:

I tried this code:

class Indicator extends PanelMenu.Button {
    _init() {
        super._init(0.0, _('My Shiny Indicator'));

        this.add_child(new St.Icon({
            icon_name: 'face-smile-symbolic',
            style_class: 'system-status-icon',
        }));

        let item = new PopupMenu.PopupMenuItem(_('Show Notification'));
        item.connect('activate', () => {
            Main.notify(_('Whatʼs up, folks?'));
        });
        this.menu.addMenuItem(item);
        // create a slider
        let slider = Gtk.Scale.new_with_range(Gtk.GTK_ORIENTATION_HORIZONTAL, 0, 1, 0.1)
        // add it to the indicator
        this.menu.addMenuItem(slider)
    }
});

but I get:

Expected an object of type ClutterActor for argument 'actor' but got type undefined

I am running gnome-shell 40.

Answer 1

You can try this.

        this.itemx = new PopupMenu.PopupBaseMenuItem({ activate: false });
        const Slider = imports.ui.slider;
        this._slider = new Slider.Slider(0);
        
        this.itemx.add_child(this._slider);
        this.menu.addMenuItem(this.itemx);

If you have problem, you might look up at other's example. eg: https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/status/volume.js