如何在最小值和最大值之间的jQuery UI滑块中添加额外的滑块

Question

我有一个jQuery UI滑块，具有最大值和最小值，并且工作正常。但是在这里，我需要在最小值和最大值之间再添加一个滑块，该滑块也可以用来滑动，然后再次单击给出所有三个滑块的按钮应该重置为原始位置。任何人都可以帮助我。代码如下。

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 ) );
         });