jQuery用戶界面滑塊：移動的值（與）處理

Question

我用我的頁面中的jQuery UI滑塊組件設置範圍的價格。 我也可以使用他們的ui.values []來設置和顯示其他div中的新值。

我怎樣才能讓看到下的新值。即如果我將 手柄移動到$ 100，我想在該手柄下設置「$ 100」文本。

順便說一句，我使用範圍版本 - 設置一個價格範圍，所以我有兩個手柄在我的滑塊（最小& max）。

var minPriceRange=100; 
var maxPriceRange=500; 
$("#priceRangeSlider").slider({ 
     range: true, 
     min: minPriceRange, 
     max: maxPriceRange, 
     step: 10, 
     values: [ minPriceRange, maxPriceRange ], 
     slide: function(event, ui) { 
      ("#fromRangeText").text("$" + ui.values[ 0 ]); 
      $("#toRangeText").text("$" + ui.values[ 1 ]); 
     } 
}); 

Answer 1

您可以使用從jQuery UI的的.position效用函數標籤的位置：

$("#slider").slider({ 
    ... 
    slide: function(event, ui) { 
     var delay = function() { 
      var handleIndex = $(ui.handle).data('index.uiSliderHandle'); 
      var label = handleIndex == 0 ? '#min' : '#max'; 
      $(label).html('$' + ui.value).position({ 
       my: 'center top', 
       at: 'center bottom', 
       of: ui.handle, 
       offset: "0, 10" 
      }); 
     }; 

     // wait for the ui.handle to set its position 
     setTimeout(delay, 5); 
    } 
}); 

看到它的行動：http://jsfiddle.net/william/RSkpH/1/。

Answer 2

change =>該事件在滑動停止時觸發，或者如果值以編程方式更改（通過值方法）。參與事件和用戶界面。使用event.originalEvent來檢測值是否通過鼠標，鍵盤或編程方式更改。使用ui.value（單處理滑塊）獲取當前句柄的值$（this）.slider（'values'，index）以獲取另一個句柄的值。

http://docs.jquery.com/UI/Slider#event-change

Answer 3

我只想把標籤手柄內，而不是在這個答案重新定位他們所有的時間，如：https://stackoverflow.com/a/7431057/1250436

$("#slider").slider({ 
    range: true, 
    min: 100, 
    max: 500, 
    step: 10, 
    values: [100, 500], 
    animate: 'slow', 
    create: function() { 
     $('#min').appendTo($('#slider a').get(0)); 
     $('#max').appendTo($('#slider a').get(1)); 
    }, 
    slide: function(event, ui) { $(ui.handle).find('span').html('$' + ui.value); } 
}); 

更新

這不起作用在Chromium for Linux中。奇怪的gfx錯誤發生。

見工作演示：http://jsfiddle.net/ohcibi/RvSgj/2/

Answer 4

我追求同一個目標，我決定去與引導的提示。您可以嘗試this JSFiddle上的代碼。

$('#slider').slider({ 
    range: true, 
    min: -60, 
    max: 60, 
    values: [ init_start_at, init_end_at ], 
    slide: function(event, ui) { 
     // Allow time for exact positioning 
     setTimeout(function(){ 
      $(ui.handle).attr('title', ui.value + '°C').tooltip('fixTitle').tooltip('show'); 
     }, 5); 
    }, 
    create: function(event, ui) { 
     var target = $(event.target); 
     var handles = $(event.target).find('a'); 
     var container, wait; 

     // Wait for the slider to be in position 
     (wait = function() { 
      if ((container = target.parents('.content')).length != 0) { 
       handles.eq(0).tooltip({animation: false, placement: 'top',trigger: 'manual', container: container, title: init_start_at + ' °C'}).tooltip('show'); 
       handles.eq(1).tooltip({animation: false, placement: 'bottom',trigger: 'manual', container: container, title: init_end_at + ' °C'}).tooltip('show'); 
      } else { 
       setTimeout(wait, 50); 
      } 
     })(); 
    } 
}); 

希望它可以幫助別人。

Answer 5

通過包含引導工具提示可以創建一個漂亮的滑塊。這是使用引導工具提示的滑塊的更新版本。 http://jsfiddle.net/ykay/jL044k1c/

function slide(event, ui) { 
    setTimeout(function() { 
     $(ui.handle).attr('title', ui.value).tooltip('fixTitle').tooltip('show'); 
    }, 0); 
} 
function create(event, ui, start, end) { 
    var handles = $(event.target).find('span'); 
    handles.eq(0).tooltip({animation: false, placement: 'top', trigger: 'manual', container: handles.eq(0), title: start}).tooltip('show'); 
    handles.eq(1).tooltip({animation: false, placement: 'top', trigger: 'manual', container: handles.eq(1), title: end}).tooltip('show'); 
} 
$('#slider').slider({ 
    range: true, 
    min: 0, 
    max: 100, 
    values: [20, 80], 
    slide: function (event, ui) { 
     slide(event, ui) 
    }, 
    create: function (event, ui) { 
     create(event, ui, $(this).slider('values', 0), $(this).slider('values', 1)) 
    } 
}); 

Answer 6

可以這麼輕鬆的找到它jQyeryUI滑塊頁的官方文檔在下面的例子中

http://jqueryui.com/slider/#custom-handle