당신에게 슬라이더가 입력 상자에 변경 사항을 반영 할 방법

Question

<div id='slider'></div> 
<div id='start'><input value="1"></div> 
<div id='stop'><input value="99"></div> 

$.ui.slider.prototype._slide = function (event, index, newVal) { 
       var otherVal, 
       newValues, 
       allowed; 

       if (this.options.values && this.options.values.length) { 
       otherVal = this.values(index ? 0 : 1); 
       if (newVal !== this.values(index)) { 
        newValues = this.values(); 
        newValues[ index ] = newVal; 
        // A slide can be canceled by returning false from the slide callback 
        allowed = this._trigger("slide", event, { 
        handle: this.handles[ index ], 
        value: newVal, 
        values: newValues 
        }); 
        otherVal = this.values(index ? 0 : 1); 
        if (allowed !== false) { 
        this.values(index, newVal, true); 
        } 
       } 
       } else { 
       if (newVal !== this.value()) { 
        // A slide can be canceled by returning false from the slide callback 
        allowed = this._trigger("slide", event, { 
        handle: this.handles[ index ], 
        value: newVal 
        }); 
        if (allowed !== false) { 
        this.value(newVal); 
        } 
       } 
       } 
      } 

$('#slider').slider({ 
    min: '0', 
    max: '99', 
    range: true, 
    values: [0,99], 
    slide: function(event, ui) { 
     if(ui.values[0] >= ui.values[1]) { 
              if(ui.handle == $("#slider a")[0]) { 
              $("#slider").slider("values", 1, ui.value+1); 
              ui.values[0] = ui.value; 
              ui.values[1] = ui.value+1; 
              } else { 
              $("#slider").slider("values", 0, ui.value-1); 
              ui.values[0] = ui.value-1; 
              ui.values[1] = ui.value; 
              } 
             } 

     var minutes0 = Math.floor(ui.values[0]); 


     var minutes1 = Math.floor(ui.values[1]); 


     $('#start input').val(minutes0); 
     $('#stop input').val(minutes1); 
    } 
}); 

바이올린 : 내가 핸들러를 드래그하면

http://jsfiddle.net/Nk8ap/18/는 지금, 변경이 텍스트 상자에 반영됩니다.

하지만 수동으로 숫자를 입력 할 때 해당 변경 사항이 처리기에 반영되도록하려면 어떻게해야합니까?

Answer 1

당신은 입력에 대한 이벤트 처리기를 추가하고, 슬라이더 값을 변경 :

$('#start input, #stop input').on('change', function() { 
    var val = [$('#start input').val(), $('#stop input').val()]; 
    $("#slider").slider('values', val); 
}); 

FIDDLE