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

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

슬라이더를 즉석에서 수정하고 싶습니다.저는 이렇게 하려고 했습니다.

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

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

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

역시 도움이 되지 않습니다.

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

현재 범위의 슬라이더를 변경할지, 슬라이더의 범위를 변경할지에 따라 달라집니다.

변경하려는 현재 범위의 값이면 .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.

위의 어떤 답변도 저에게 도움이 되지 않았습니다. 아마도 이전 버전의 프레임워크를 기반으로 했을 것입니다.

기본 컨트롤의 값을 설정한 다음 아래와 같이 새로 고침 방법을 호출하면 됩니다.

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

Mal의 대답은 나에게 유일하게 통했습니다 (아마도 jquery).UI가 변경되었습니다), 범위를 다루는 변형은 다음과 같습니다.

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

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

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/

@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 });

입력 박스 뿐만 아니라 슬라이더도 업데이트하고 싶었습니다.저는 팔로우가 일을 합니다.

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

어디에a는 목적어는 다음과 같습니다.

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

제 경우에는 핸들이 2개인 jquery slider만 작동했습니다.

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

이것은 제게 효과가 있었지만 맞춤형 구현입니다.

슬라이더 값 설정

  $('#slider-width').slider('values', 0, range[ 0 ]);
  $('#slider-width').slider('values', 1, range[ 1 ]);
  setSliderHandles('width', range[ 0 ], range[ 1 ]);

핸들을 제자리로 이동

  function setSliderHandles(type, min, max){
    $('#slider-' + type + ' span.ui-slider-handle:eq(0) .price-range-min').html(min + '"');
    $('#slider-' + type + ' span.ui-slider-handle:eq(1) .price-range-max').html(max + '"');
    $('#slider-' + type + ' span.price-range-both').html('<i>' + min + '" - </i>' + max + '"');
    
    if ( min == max ) {
      $('#slider-' + type + ' span.price-range-both i').css('display', 'none');
      $('#single_' + type).val(min);
    } else {
      $('#slider-' + type + ' span.price-range-both i').css('display', 'inline');
      $('#single_' + type).val('');
    }

    if (collision($('#slider-' + type + ' span.price-range-min'), $('#slider-' + type + ' span.price-range-max')) == true) {
        $('#slider-' + type + ' span.price-range-min, #slider-' + type + ' span.price-range-max').css('opacity', '0');  
        $('#slider-' + type + ' span.price-range-both').css('display', 'block');        
    } else {
        $('#slider-' + type + ' span.price-range-min, #slider-' + type + ' span.price-range-max').css('opacity', '1');  
        $('#slider-' + type + ' span.price-range-both').css('display', 'none');     
    }        
  }

function collision($div1, $div2) {
    var x1 = $div1.offset().left;
    var w1 = 40;
    var r1 = x1 + w1;
    var x2 = $div2.offset().left;
    var w2 = 40;
    var r2 = x2 + w2;
      
    if (r1 < x2 || x1 > r2) return false;
    return true;
}

시작 또는 새로 고침 시 값 = 0 (기본값) http 요청에서 값을 가져오는 방법

 <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>

마지막으로 저는 아래와 같습니다.

$("#priceSlider").slider('옵션', {min:5, max:20, value:[6,19]}); $("#priceSlider").슬라이더 ("refresh");

작업 버전은 다음과 같습니다.

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