How to create a custom NSSlider with a transparent middle bar and custom knob size

Question

I've searched around for some code on NSSliderCell but I can't find a way to do what I'm looking for.
I'd like to create something like this (where the white line is the slider knob, 1 pixel width):

I'm going to use this for the time bar of a music track, so it's going to move every second (that's why I want to use a NSSlider to make things easy).
What do I need to do to make a slider, with a transparent middle bar, similar to the image above?

PS: It's not going to be touchable, it's just for display.

Answer 1

I finally got it:

• I created a NSSliderCell subclass with a property @property float x;
• I overrode the drawKnob method and inside it I wrote:

-(void)drawKnob:(NSRect)knobRect{ self.x = knobRect.origin.x; }

• I dragged a NSSlider into my window (made it small, changed it's width to the window's width) and changed it's cell class to the one I created;
• And then when the music is playing, every time a second goes by I do:

[_timeBarSlider setMinValue:0];
[_timeBarSlider setMaxValue:myTrack.duration];
[_timeBarSlider setDoubleValue:myPlayer.currentPosition];
[[_timeBarImageView animator] setFrame:NSMakeRect(_timeBarSliderCell.x, yourYCoordinate, yourWidth, yourHeight)];

_timerBarSlider is the NSSlider I have in IB / _timerBarImageView is the image view that contains the vertical image line / _timerBarSlderCell is the NSSlider's cell (subclassed)

PS: the NSSlider is behind every object in that window, so that the user can't see it. You can't setHidden:YES on it because the drawKnob method will not be called.

Answer 2

You can just override drawRect:, as when subclassing NSView, except in your implementation, use [self doubleValue] to determine where to draw the line. However, I don't see the point of subclassing NSSlider in this case. A custom NSView could have a property that determines where to draw the line, and then other code could set that property or bind to it.

Answer 3

That looks like a vertical split view to me with a 1 pixel wide divider. You might try that. There's a method to set the position of the divider so it would be easy to move as you need. And you can make the divider 1 pixel by creating a subclass of NSSplitview and overriding the dividerThickness method to return 1. Then you just set the background of the 2 subviews to black and there you go. It's easy to try so maybe it will work for you. Good luck.