jQuery UI Slider : 핸들을 따라 값을 이동하십시오.

Question

내 페이지에서 jQuery UI 슬라이더 구성 요소를 사용하여 범위의 가격을으로 설정했습니다. ui.values ​​[]를 사용하여 다른 div의 새 값을 설정하고 표시 할 수도 있습니다.

어떻게 할 수 있습니까? 핸들 아래 새 값을 확인하십시오. 나는. 핸들을 $ 100로 이동 한 경우 핸들 아래에 "$ 100"텍스트를 설정하려고합니다.

나는 범위 버전을 사용하여 가격 범위를 설정하므로 슬라이더에 두 개의 핸들이 있습니다 (최소 & 최대).

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 유틸리티 기능을 사용할 수 있습니다 : 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); 
    } 
}); 

그것에게 조치를 참조하십시오.

Answer 2

change =>이 이벤트는 슬라이드 중지시 또는 값 방식에 따라 프로그래밍 방식으로 값이 변경되면 트리거됩니다. 인자 event와 ui를 취한다. 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); } 
}); 

업데이트

이 작동하지 않습니다 Linux 용 Chromium에서 이상한 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