title: Changing colour of angularjs slider with pointer
body: <p>Hi I'm building a slider in angularjs that changes color depending on where you move the pointer.  </p>
  
  <p>1.) if the pointer is on the rightside, the bar will be red
  2.) if the pointer is on the leftside, the bar will be blue 
  3.)If the pointer is in the middle the bar will be half red, half blue</p>
  
  <p>I am using this library: <a href="http://prajwalkman.github.io/angular-slider/" rel="nofollow">http://prajwalkman.github.io/angular-slider/</a></p>
  
  <p>Problem:</p>
  
  <p>I'm trying to accomplish this by having one pointer to be fixed on the bottom and invisible so that there is only one pointer moving while the slider changes color.  However i'm scratching my head on how to make this work.  Any help?   </p>
  
  <p>Here is a plunker:  <a href="http://plnkr.co/edit/tmDfTksDwSRLrc0choOJ?p=preview" rel="nofollow">http://plnkr.co/edit/tmDfTksDwSRLrc0choOJ?p=preview</a></p>