title: Slider with Multiple Handle and Background Color for content
body: <p>I am trying to work with Jquery UI slider where I can have multiple handles:</p>
  
  <pre><code>$(function () {
          var handlers = [25, 50, 75];
          $("#slider").slider({
              min: 0,
              max: 100,
              values: handlers,
              slide: function (evt, ui) {
                  for (var i = 0, l = ui.values.length; i &lt; l; i++) {
                      if (i !== l - 1 &amp;&amp; ui.values[i] &gt; ui.values[i + 1]) {
                          return false;
                      }
                      else if (i === 0 &amp;&amp; ui.values[i] &lt; ui.values[i - 1]) {
                          return false;
                      }
                  }
              }
          });
      });
  </code></pre>
  
  <p>Please note that one handler can't overlap and I will need to set the handler dynamically on load, and save the handler positions on change.</p>
  
  <p>The thing that i am trying to accomplish is to color the ui-content betweent the handler to different colors. I have attached the an Image.</p>
  
  <p><img src="https://i.stack.imgur.com/UfZLn.png" alt="Slider"></p>
  
  <p>Please advice if this is possible.</p>