2012-08-30 58 views
0

我工作的這個演示:www.datesitesfree.com.aujQuery UI的滑塊+更新最小和最大

有滑塊18和99以下2號...

我需要有一個範圍滑尺(2可動部分)和最小需要更新18值和最大值需要更新99 value.eg:如何讓2個移動部件

enter image description here

任何意見,以及如何讓他們更新2個值分別嗎?

這是當前HTML:

<h2 class="demoHeaders">Slider</h2> 
    <div id="slider"></div> 
    </br></br> 
    <span id="minAge">18</span> 
    </br></br> 
    <span id="maxAge">99</span> 

這裏是當前JQUERY:

  $('#slider').slider({ 
       min: 18, 
       max: 99, 
       change: function(event, ui) { 
        $('span#minAge').html(ui.value); 
       } 
      }); 

THX

回答

1

爲了有一個雙滑塊,您需要設置範圍: true和values:[開始,結束]。

因此,對於你的代碼:

  $('#slider').slider({ 
       range: true, 
       min: 18, 
       max: 99, 
       values: [18, 99], 
       change: function(event, ui) { 
        $('span#minAge').html(ui.values[0]); 
        $('span#maxAge').html(ui.values[1]); 
       } 
      }); 
+0

三江源 - 完美的作品 – Adam