Creating a Custom NSSlider Based Off of QuickTIme X's Trim UI

Question

http://f.cl.ly/items/350X3c0h0A0k3s3f1R1h/Screen%20Shot%202012-03-27%20at%202.53.41%20PM.png

I'm working on an application that'll allow a user to select a range of time in a piece of audio for OS X. Most of the searching I've done around getting a UI like the above trimming interface from QuickTime X has unfortunately turned up many iOS related APIs.

My first instinct is that this is a heavily customized NSSlider. Is there a general direction I should go in when attempting to create this? Is NSSlider the best route? Any pointers, tips or code would be greatly appreciated.

EDIT: There was a good comment about this possibly being a custom control. Any guidance on that would be greatly appreciated as well!

Doesn't look like a slider to me at all. I suspect it is a custom control. — Jonathan Grynspan, Mar 27 '12 at 22:23

score 1 · Accepted Answer · answered Apr 04 '12 at 02:33

Create a custom control. Here's what I do for my custom controls:

First the interface:

@interface AS_CustomControl : NSControl <NSCoding>
{
}
@end

Then the implementation:

@implementation AS_CustomControl

-(id)initWithFrame:(NSRect)rect
{       
    if (self = [super initWithFrame:rect])
    {
        [self initCustomControl];
    }
    return self;
}

-(id)initWithCoder:(NSCoder*)coder
{       
    if (self = [super initWithCoder:coder])
    {
        [self initCustomControl];
    }
    return self;
}

-(void)initCustomControl
{
    // put any custom initialization here
    // such as default variable state
}

-(void)dealloc
{
    [super dealloc];
}

-(void)encodeWithCoder:(NSCoder*)coder
{
    [super encodeWithCoder:coder];
}

+(Class)cellClass
{
    return [NSActionCell class];
}
@end

The cellClass method ensures that your custom control will fire action messages when the user interacts with it.

It should then just be a case of drawing the waveform in drawRect: and overriding the mouseDown: mouseDragged: and mouseUp: messages to handle the range selection.

Creating a Custom NSSlider Based Off of QuickTIme X's Trim UI

1 Answers1