Search code examples
swiftnsviewnsimagensmenunsmenuitem

Adding min/max images to NSSlider using Swift

I created a NSSlider programmatically and implemented it in a NSMenuItem:

    let menuVolumeSliderItem = NSMenuItem()
    let menuVolumeSlider = NSSlider()

    menuVolumeSlider.sliderType = NSSliderType.linear
    menuVolumeSlider.isEnabled = true
    menuVolumeSlider.isContinuous = true
    menuVolumeSlider.action = #selector(AppDelegate.doSomething)
    menuVolumeSlider.minValue = 0.0
    menuVolumeSlider.maxValue = 1.0
    menuVolumeSlider.floatValue = 0.5
    menuVolumeSlider.frame.size.width = menu.size.width
    menuVolumeSlider.frame.size.height = 20.0

    menuVolumeSliderItem.view = menuVolumeSlider
    menu.addItem(menuVolumeSliderItem)

And essentially, it work’s like a charm:

enter image description here

But the result I want to achieve is a Slider with a min/max image on the left/right edge of the Slider like this one:

enter image description here

How can I achieve a NSMenuItem like that?

EDIT:

I’ve created a custom NSView:

    let view = NSView()
    view.frame.size.width = menu.size.width
    view.frame.size.height = 25.0

... then created a NSImage ...

    let img = NSImageView()
    img.frame.size.width = 16.0
    img.frame.size.height = 16.0
    img.image = NSImage(named: "NSStatusAvailable")!

... and added menuVolumeSlider and img to my custom view:

    view.addSubview(img)
    view.addSubview(menuVolumeSlider)
    menuVolumeSliderItem.view = view
    menu.addItem(menuVolumeSliderItem)

... and it worked! But can anyone please give me a hint how to change the positions of the subViews?

enter image description here

Solution

  • Create a NSView that will include the slider and the two images. Then set menuVolumeSliderItem.view to be that NSView.