jQuery UI Slider: değeri

Question

ile birlikte hareket ettirin Sayfamdaki jQuery UI kaydırıcı bileşenini kullanarak ürün yelpazesini ürün fiyatına ayarlayın. Ayrıca, diğer değerlerde yeni değerleri ayarlamak ve göstermek için ui.values ​​[] işlevini de kullanabilirim.

nasıl sapın altında yeni değerini görmek yapabilirsiniz. Yani tutamacını 100 $ 'a taşıdıysam, "$ 100" metnini bu tutamacın altına ayarlamak istiyorum.

BTW, aralık versiyonunu kullanıyorum - bir dizi fiyat belirlemek için, kaydırıcımda TWO kollarım var (en az & 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

Sen etiketleri konumlandırmak için jQuery UI .position yarar işlevini kullanabilirsiniz: http://jsfiddle.net/william/RSkpH/1/:

$("#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); 
    } 
}); 

o eylemi Bkz.

Answer 2

change => Bu olay, slayt durdurulduğunda veya değer program aracılığıyla değiştirilirse (değer yöntemiyle) tetiklenir. Argümanlar olayı ve kullanıcı arabirimi alır. Fare, klavye veya program aracılığıyla değiştirilen değerin olup olmadığını belirlemek için event.originalEvent öğesini kullanın. Başka bir tanıtıcı değeri almak için geçerli tanıtıcı, $ (this) .slider ('değerler', dizin) değerini almak için ui.value (tek tutamaçlı kaydırıcılar) kullanın.

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

Answer 3

Sadece onun yerine bu cevabı olduğu gibi her zaman onları yeniden konumlandırılması, tutamaklar içine etiketleri koyardı: 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); } 
}); 

Güncelleme

Bu işe yaramazsa Linux için Chromium'da. Garip bir gfx hatası oluşuyor.

çalışma demo izleyin: Ben de aynı hedefi takip edildi http://jsfiddle.net/ohcibi/RvSgj/2/

Answer 4

ve ben Bootstrap adlı araç ipuçları ile gitmeye karar verdi. Kodu this JSFiddle'da deneyebilirsiniz.

$('#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); 
      } 
     })(); 
    } 
}); 

Birini yardımcı olur.

Answer 5

Bootstrap araç ipuçlarını dahil ederek güzel bir kaydırıcı oluşturmak mümkündür. İşte bootstrap araç ipuçlarını kullanarak kaydırıcının güncellenmiş bir sürümü. 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

aşağıdaki örnekte jQyeryUI kaydırıcı sayfasının resmi belgelerinde bu kadar kolay

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