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

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

---

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

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

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

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

도움이되지 않습니다.

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

---

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

변경하려는 현재 범위의 값인 경우 .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});

---

나를 위해 이것은 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.

---

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

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

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

---

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

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

---

@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를 재설정합니다. 이것이 다른 사람들에게 도움이되기를 바랍니다.

---

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

요소에 슬라이더 동작 적용

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

...

슬라이더 값 설정

s.slider('value',10);

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

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

---

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

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/

---

I wanted to update slider as well as the inputbox. For me following is working

a.slider('value',1520);
$("#labelAID").val(1520);

where a is object as following.

 var a= $( "<div id='slider' style='width:200px;margin-left:20px;'></div>" ).insertAfter( "#labelAID" ).slider({
            min: 0,
            max: 2000,
            range: "min",
            value: 111,
            slide: function( event, ui ) {

                $("#labelAID").val(ui.value    );
            }
        });

        $( "#labelAID" ).keyup(function() {
            a.slider( "value",$( "#labelAID" ).val()  );
        });

---

In my case with jquery slider with 2 handles only following way worked.

$('#Slider').slider('option',{values: [0.15, 0.6]});

---

On start or refresh value = 0 (default) How to get value from http request

 <script>
       $(function() {
         $( "#slider-vertical" ).slider({
    animate: 5000,
    orientation: "vertical",
    range: "max",
    min: 0,
    max: 100,
    value: function( event, ui ) {
        $( "#amount" ).val( ui.value );

  //  build a URL using the value from the slider
  var geturl = "http://192.168.0.101/position";

  //  make an AJAX call to the Arduino
  $.get(geturl, function(data) {

  });
  },
    slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );

  //  build a URL using the value from the slider
  var resturl = "http://192.168.0.101/set?points=" + ui.value;

  //  make an AJAX call to the Arduino
  $.get(resturl, function(data) {
  });
  }
  });

$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );

});
   </script>

---

Finally below works for me

$("#priceSlider").slider('option',{min: 5, max: 20,value:[6,19]}); $("#priceSlider").slider("refresh");

---

Here is working version:

var newVal = 10;
var slider = $('#slider');        
var s = $(slider);
$(slider).val(newVal);
$(slider).slider('refresh');

참고URL : https://stackoverflow.com/questions/2833396/jquery-ui-slider-setting-programmatically