title: How to set 3 different colors at jQuery UI Slider
body: <p>I'm using this <a href="http://simeydotme.github.io/jQuery-ui-Slider-Pips/" rel="nofollow noreferrer">UI Slider</a>. I've to make this slider with 3 different colors for:</p>
  
  <ol>
  <li>Handle Color</li>
  <li>Previous portion of Handle</li>
  <li>Next portion of Handle</li>
  </ol>
  
  <p>Something like this:
  <img src="https://i.imgur.com/XcxZzt3.png" title="source: imgur.com" /></p>
  
  <p>So far, I'm able to put handle color only:</p>
  
  <p><img src="https://i.imgur.com/OqDzQPK.png" title="source: imgur.com" /></p>
  
  <p>But, How can I set two more different color (one is for previous portion of Handle and another is for next portion of handle like the first screenshot)? Is there any way adding two different classes by jQuery and style those classes like: </p>
  
  <pre><code>.handle-previous-slider {
    background: yellow;
  }
  .handle-next-slider {
    background: green;
  }
  </code></pre>
  
  <p>? So far, <a href="http://jsfiddle.net/learner73/aqpx21rr/" rel="nofollow noreferrer">my result at fiddle</a></p>