title: How to create multi range time slider in jQuery UI
body: <p>I am using JQuery UI Time Slider.I want to get multiple Ranges with multiple Handles.<br>
  such like given below :</p>
  
  <p>Start point 10:00 AM--Range---2:00 PM      4:00 PM---Range------8:00 PM  9:00 PM---Range---11:00 PM  Endpoint</p>
  
  <p>I have tried this </p>
  
  <pre><code>$("#slider2").timeslider({
  
          sliderOptions: {
              ranges:  [false, true, false, true], 
              min: 300, 
              max: 3179, 
              values: [400, 800,1100,1600,2000,2500],
              step:5
          },
  
          errorMessage: '#max2',
          timeDisplay: '#time2',
  
          clickSubmit: function (e){
              var that = $(this).siblings('#slider2');
  
              $('#schedule2 tbody').append('&lt;tr&gt;' +
                  '&lt;td&gt;' + that.attr('id') + '&lt;/td&gt;' +
                  '&lt;td&gt;' + that.timeslider('getTime', that.slider("values", 0)) + '&lt;/td&gt;' + 
                  '&lt;td&gt;' + that.timeslider('getTime', that.slider("values", 1)) + '&lt;/td&gt;' + 
                  '&lt;td&gt;' + that.timeslider('getTime', that.slider("values", 2)) + '&lt;/td&gt;' + 
                  '&lt;td&gt;' + that.timeslider('getTime', that.slider("values", 3)) + '&lt;/td&gt;' + 
                  '&lt;td&gt;' + that.timeslider('getTime', that.slider("values", 4)) + '&lt;/td&gt;' + 
                  '&lt;td&gt;' + that.timeslider('getTime', that.slider("values", 5)) + '&lt;/td&gt;' + 
                  '&lt;/tr&gt;');
              e.preventDefault(); 
          }
      });
  </code></pre>
  
  <p>If anybody have a good example please share link with me to get these kind of output or please help me to modify this above code.</p>
  
  <p>Thank you 
  "Have a nice day ahead"</p>