jQuery UI Slider: przesuń wartość wzdłuż (z) uchwytem

Question

Użyłem składnika suwak jQuery UI na mojej stronie, aby ustawić zakres cen. Mogę również użyć ich ui.values ​​[], aby ustawić i pokazać nowe wartości w innych elementach div.

W jaki sposób mogę wykonać do zobacz nową wartość pod uchwytem. To znaczy. jeśli przeniosłem uchwyt do 100 USD, chcę ustawić tekst "100 USD" pod tym uchwytem.

BTW, używam wersji zakresu - do ustalenia zakresu cen, więc mam dwa uchwyty na moim suwaku (min. & 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

Można użyć funkcji .position użytkową z jQuery UI, aby umieścić etykiety:

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

zobaczyć to czynność: http://jsfiddle.net/william/RSkpH/1/.

Answer 2

change => To zdarzenie jest wyzwalane przy zatrzymaniu slajdów lub jeśli wartość została zmieniona programowo (według metody wartości). Przyjmuje zdarzenie argumentów i ui. Użyj event.originalEvent, aby wykryć, czy wartość zmieniła się za pomocą myszy, klawiatury lub programowo. Użyj ui.value (pojedynczych suwaków), aby uzyskać wartość bieżącego uchwytu, $ (this) .slider ("wartości", indeks), aby uzyskać kolejną wartość uchwytu.

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

Answer 3

ja po prostu umieścić etykiety wewnątrz uchwytów, zamiast repozycjonowanie im cały czas, jak w tej odpowiedzi: 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); } 
}); 

Aktualizacja

To nie działa w Chromium dla systemu Linux. Pojawia się dziwny błąd GFX.

Zobacz demo robocza: http://jsfiddle.net/ohcibi/RvSgj/2/

Answer 4

byłem realizujących ten sam cel i ja zdecydowaliśmy się pojechać za podpowiedzi Bootstrap. Możesz wypróbować kod na 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); 
      } 
     })(); 
    } 
}); 

Mam nadzieję, że komuś pomaga.

Answer 5

Można utworzyć ładny suwak, dodając podpowiedzi do bootstrap. Oto zaktualizowana wersja suwaka za pomocą etykiet narzędzi do ładowania. 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

można go znaleźć tak łatwo w oficjalnej dokumentacji stronie suwaka jQyeryUI w poniższym przykładzie

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