How to customize a NSSlider

Question

I'm trying to implement a custom slider in Cocoa with 5 values. See my demo project, which can be downloaded here: http://s000.tinyupload.com/index.php?file_id=07311576247413689572.

I've subclassed the NSSliderCell and implemented methods like drawKnob:(NSRect)knobRect and drawBarInside:(NSRect)cellFrame flipped:(BOOL)flipped etc.

I'm facing some issues:

1. I'm not able to position the knob correctly regarding to the background image. I know that I'm able to change the knob's frame, and I've tried doing some calculation to position the knob correctly, but I'm not able to make it work for my custom slider. Could someone please help me with this?
2. The height of my custom slider background is 41px. In the drawBarInside:(NSRect)cellFrame flipped:(BOOL)flipped I change the height of the frame to 41px as well, but the entire background is not visible. Why?
3. I've noticed that the included images (the background and knob) are flipped vertically. Why? Note that the border top is darker in the background compared to the bottom, but this is reversed when I draw the background.

Answer 1

1. I found a mistake in your calculation of the x position of the knob rectangle: You used the height of the image where you should have used the width.

2. The cell drawing is being clipped to the frame of the control. Maybe you could expand the control frame when your cell awakes.

3. You need to use the NSImage method drawInRect:fromRect:operation:fraction:respectFlipped:hints:, and pass YES for the respectFlipped: parameter. Apple's controls generally do use flipped coordinates.

Added: Expanding the frame in awakeFromNib doesn't seem to work, the frame gets set back. Here's something that does work. Instead of overriding drawBarInside:flipped:, add this override:

- (void)drawWithFrame:(NSRect)cellFrame inView:(NSView *)controlView
{
    NSRect controlFrame = [controlView frame];
    float bgHeight = self.backgroundImage.size.height;
    if (controlFrame.size.height < bgHeight)
    {
        controlFrame.size.height = bgHeight;
        [controlView setFrame: controlFrame];
    }

    [self.backgroundImage
        drawInRect: [controlView bounds]
        fromRect: NSZeroRect
        operation: NSCompositeSourceOver
        fraction: 1.0
        respectFlipped: YES
        hints: NULL];
    [self drawKnob];
}