title: Custom Slider In SpriteKit
body: <p>I'm trying to create a horizontal slider like the one shown below in SpriteKit (in Objective C for Mac OS).</p>
  
  <p><a href="https://i.stack.imgur.com/q9BJ8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q9BJ8.png" alt="enter image description here"></a></p>
  
  <p>I'm certainly doing something wrong because the "knob" of the slider never moves left, it only moves right and I'm not sure what the issue is. I'm using the <code>mouseDragged:</code> method to handle everything. Here's the code below:</p>
  
  <p><strong>Slider.m</strong><br></p>
  
  <pre><code>#import "Slider.h"
  
  @interface Slider()
  
  @property CGSize dimensions;
  @property SKSpriteNode *background, *foreground, *knob;
  
  @end
  
  @implementation Slider
  
  -(instancetype) initWithDimensions:(CGSize)dimensions Percentage:(double)percentage {
      if (self = [super init]) {
          _dimensions = dimensions;
          _percentage = percentage;
          [self initBackgroundSprite];
          [self initForegroundSprite];
          [self initKnob];
          self.userInteractionEnabled = YES;
      }
      return self;
  }
  
  -(void) initBackgroundSprite {
      _background = [SKSpriteNode spriteNodeWithImageNamed:@"sliderBG"];
      _background.centerRect = CGRectMake(6.0/13.0, 5.0/11.0, 1.0/13.0, 1.0/11.0);
      [_background setAnchorPoint:CGPointMake(0, 0.5)];
      double xScale = _dimensions.width / _background.frame.size.width;
      double yScale = _dimensions.height / _background.frame.size.height;
      [_background setXScale:xScale];
      [_background setYScale:yScale];
      [self addChild:_background];
  }
  
  -(void) initForegroundSprite {
      _foreground = [SKSpriteNode spriteNodeWithImageNamed:@"sliderFG"];
      _foreground.centerRect = CGRectMake(6.0/13.0, 5.0/11.0, 1.0/13.0, 1.0/11.0);
      [_foreground setAnchorPoint:CGPointMake(0, 0.5)];
      double xScale = _dimensions.width*_percentage / _foreground.frame.size.width;
      double yScale = _dimensions.height / _foreground.frame.size.height;
      [_foreground setXScale:xScale];
      [_foreground setYScale:yScale];
      [self addChild:_foreground];
  }
  
  -(void) initKnob {
      _knob = [SKSpriteNode spriteNodeWithImageNamed:@"sliderKnob"];
      _knob.centerRect = CGRectMake(6.0/13.0, 5.0/11.0, 1.0/13.0, 1.0/11.0);
      [_knob setAnchorPoint:CGPointMake(0, 0.5)];
      double scaleFactor = 2 / (_knob.frame.size.height / _background.frame.size.height);
      NSLog(@"%f, %f", _knob.frame.size.height, _background.frame.size.height);
      [_knob setScale:scaleFactor];
      [_knob setZPosition:2];
      [_knob setName:@"knob"];
      [self addChild:_knob];
  }
  
  -(void) mouseDragged:(NSEvent *)event {
      CGPoint location = [event locationInNode:self];
      NSArray *nodes = [self nodesAtPoint:location];
  
      for (SKNode *node in nodes) {
          if ([node isKindOfClass:[SKSpriteNode class]]) {
              SKSpriteNode *sprite = (SKSpriteNode*)node;
  
              if ([sprite.name isEqualToString:@"knob"]) {
                  [self updateKnobPositionWithLocation:location];
              }
  
          }
      }
  }
  
  -(void) updateKnobPositionWithLocation:(CGPoint)location {
      double x = location.x;
      double y = _knob.position.y; //don't want the y-pos to change
  
      double bgX = _background.position.x; //x pos of slider
      double width = _background.frame.size.width; //width of slider
      if (x &gt; bgX + width)//if knob goes beyond width of slider, restrict to width
          x = bgX + width;
      else if (x &lt; bgX)
          x = bgX;
  
      [_knob setPosition:CGPointMake(x, y)];
  }
  </code></pre>
  
  <p>Here's a video to illustrate the behaviour:</p>
  
  <p><a href="https://drive.google.com/open?id=0B8Zfr1yQCdf-OG5kZFRWNFgxd1k" rel="nofollow noreferrer">https://drive.google.com/open?id=0B8Zfr1yQCdf-OG5kZFRWNFgxd1k</a></p>