Как добавить дополнительный слайдер в jquery ui слайдер между минимальным и максимальным значением

Question

У меня есть ползунок jquery UI, имеющий максимальное и минимальное значение и работающий нормально. Но здесь мне нужно добавить еще один ползунок между минимальным и максимальным значением, который также можно использовать для скольжения, и снова нажать кнопку, учитывая все 3 ползунка следует сбросить в исходное положение. Может кто-нибудь, пожалуйста, помогите мне. Код приведен ниже.

HTML

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- HTML --> 
      <button class="button">submit</button>
      <p>
         <label for = "price">Price range:</label>
         <input type = "text" id = "price" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id = "slider-3"></div>

Javascript

$(".button").click(function(){
    alert("need to reset the slider");
       });
         $(function() {
            $( "#slider-3" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 35, 200 ],
               slide: function( event, ui ) {
                  $( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
            });
            $( "#price" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +
               " - $" + $( "#slider-3" ).slider( "values", 1 ) );
         });