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

如何使滑块反映输入框中所做的更改

1 个答案: