[jquery] jQuery UI 슬라이더 (프로그래밍 방식으로 설정)

Question 1

슬라이더를 즉석에서 수정하고 싶습니다. 나는 사용하여 그렇게하려고했다.

$("#slider").slider("option", "values", [50,80]);

이 호출은 값을 설정하지만 요소는 슬라이더 위치를 업데이트하지 않습니다. 부름

$("#slider").trigger('change');

도움이되지 않습니다.

값과 슬라이더 위치를 수정하는 다른 / 더 나은 방법이 있습니까?

Question 2

현재 범위에서 슬라이더를 변경하거나 슬라이더 범위를 변경 하려는지 여부에 따라 다릅니다.

변경하려는 현재 범위의 값인 경우 .slider () 메서드를 사용해야하지만 구문은 사용한 것과 약간 다릅니다.

$("#slider").slider('value',50);

또는 두 개의 핸들이있는 슬라이더가있는 경우 다음과 같습니다.

$("#slider").slider('values',0,50); // sets first handle (index 0) to 50
$("#slider").slider('values',1,80); // sets second handle (index 1) to 80

변경하려는 범위 인 경우 다음과 같습니다.

$("#slider").slider('option',{min: 0, max: 500});

Question 3

나를 위해 이것은 UI Slider에서 슬라이드 이벤트를 완벽하게 트리거합니다.

hs=$('#height_slider').slider();
hs.slider('option', 'value',h);
hs.slider('option','slide')
       .call(hs,null,{ handle: $('.ui-slider-handle', hs), value: h });

hs.slider('option', 'value',h); 트리거 전에 값을 설정하는 것을 잊지 마십시오 . 다른 슬라이더 핸들러는 값과 동기화되지 않습니다.

여기서 주목해야 할 한 가지는 hhtml을 사용하는 경우 인덱스 / 위치 (값이 아님)입니다 select.

Question 4

위의 답변 중 어느 것도 저에게 효과가 없었습니다. 아마도 이전 버전의 프레임 워크를 기반으로 한 것일까 요?

내가해야 할 일은 기본 컨트롤의 값을 설정 한 다음 아래와 같이 refresh 메서드를 호출하는 것뿐입니다.

$("#slider").val(50);
$("#slider").slider("refresh");

Question 5

Mal의 대답은 나를 위해 일한 유일한 대답이었습니다 (jqueryUI가 변경되었을 수도 있음), 다음은 범위를 처리하는 변형입니다.

$( "#slider-range" ).slider('values',0,lowerValue);
$( "#slider-range" ).slider('values',1,upperValue);
$( "#slider-range" ).slider("refresh");

Question 6

@gaurav 솔루션의 한 부분은 여러 슬라이더가있는 jQuery 2.1.3 및 JQuery UI 1.10.2에서 작동했습니다. 내 프로젝트는 이 filter.js 플러그인으로 데이터를 필터링하기 위해 4 개의 범위 슬라이더를 사용하고 있습니다 . 다른 솔루션은 슬라이더 핸들을 시작점으로 다시 재설정했지만 filter.js가 이해 한 이벤트를 발생시키지 않은 것 같습니다. 슬라이더를 반복하는 방법은 다음과 같습니다.

$("yourSliderSelection").each (function () {
    var hs = $(this);
    var options = $(this).slider('option');

    //reset the ui
    $(this).slider( 'values', [ options.min, options.max ] );

    //refresh/trigger event so that filter.js can reset handling the data
    hs.slider('option', 'slide').call(
        hs,
        null,
        {
            handle: $('.ui-slider-handle', hs),
            values: [options.min, options.max]
        }
    );

});

hs.slider()코드는 내 시나리오에서 데이터가 아니라 UI를 재설정합니다. 이것이 다른 사람들에게 도움이되기를 바랍니다.

Question 7

다음과 같은 이벤트를 수동으로 트리거 할 수 있습니다.

요소에 슬라이더 동작 적용

var s = $('#slider').slider();

…

슬라이더 값 설정

s.slider('value',10);

슬라이드 이벤트를 트리거하여 UI 개체를 전달합니다.

s.trigger('slide',{ ui: $('.ui-slider-handle', s), value: 10 });

Question 8

여러 입력에서 슬라이더 값을 변경해야하는 경우 다음을 사용하십시오.

html :

<input type="text" id="amount">
<input type="text" id="amount2">
<div id="slider-range"></div>

js :

    $( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 217,
    values: [ 0, 217 ],
    slide: function( event, ui ) {
        $( "#amount" ).val( ui.values[ 0 ] );
        $( "#amount2" ).val( ui.values[ 1 ] );
    }
    });

$("#amount").change(function() {
    $("#slider-range").slider('values',0,$(this).val());
});
$("#amount2").change(function() {
    $("#slider-range").slider('values',1,$(this).val());
});

https://jsfiddle.net/brhuman/uvx6pdc1/1/