user2539797
user2539797

Reputation: 75

How to you make the slider reflect changes made in the input box

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

fiddle: http://jsfiddle.net/Nk8ap/18/

Right now, when i drag the handlers, the change is reflected on the text box.

But how can I make it so that when I manually type in the numbers, that change is reflected on the handlers?

Upvotes: 1

Views: 293

Answers (1)

adeneo
adeneo

Reputation: 318202

You add an event handler for the inputs, and change the slider values :

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

FIDDLE

Upvotes: 3

Related Questions