如何將幾個jQuery UI範圍滑塊混合在一起？

Question

任何人都知道如何將幾個jQuery UI範圍可拖動滑塊混合在一起？

樣本圖像是顯示我的意思：Click here

單範圍可拖動滑塊示例代碼：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" /> 

<script type="text/javascript"> 
    $(function() { 
     $("#slider-range").slider({ 
      range: true, 
      min: 71, 
      max: 109, 
      values: [75, 100], 
      slide: function(event, ui) { 
       $("#size-range").html(Math.floor(ui.values[0]/12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1]/12) + "'" + (ui.values[1] % 12) + '"'); 
       $("#min_inches").val(ui.values[0]); 
       $("#max_inches").val(ui.values[1]); 
      } 
     }); 
     $("#size-range").html(Math.floor($("#slider-range").slider("values", 0)/12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1)/12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"'); 
     $("#min_inches").val($("#slider-range").slider("values", 0)); 
     $("#max_inches").val($("#slider-range").slider("values", 1)); 
    }); 
    </script> 

    <p>Size Range: <strong><span id="size-range"></span></strong> <small><em>(drag slider handles below to specify)</em></small></p> 

    <div id="slider-range"></div> 

    <input type="text" name="min_inches" id="min_inches" value="" /> 
    <input type="text" name="max_inches" id="max_inches" value="" /> 

..please幫助我。

Answer 1

看看這個解決方案：http://www.kelvinluck.com/assets/jquery/ui-slider/slider_test.html