jQuery UI Range slider bug?

问题

I have run into an interesting issue with the jQuery UI slider. I need to assign its min and max values from sript and am doing the following

$("#sliCSSHt").slider('values',[minh,maxh]);
$("#sliCSSHt").slider('refresh');

The problem arises when minh = maxh. The MIN button appears to go and sit on TOP of the max button. The innocent user who then tries to inrease the max value finds that the slider has beome unresponsive since he/she is actually dragging the min button beyond the current position of the max button. What if anything can be done to get round this?

I am using jQuery UI 1.91 with jQuery 1.82 - I don't have the option of moving up to jQuery 1.9 since I am using plugins that use the browser object which has now been taken out of jQuery.

回答1:

You could always stop the sliders from overlapping. Something like

$( "#sliCSSHt" ).on( "slide", function( event, ui ) {
    if(ui.values[0]+10 > ui.values[1])  
       return false;
} );

http://jsfiddle.net/c934g/5/

Update This bug is fixed in the latest jquery-ui

using the latest jquery-ui files http://code.jquery.com/ui/1.10.3/jquery-ui.js it works.

http://jsfiddle.net/c934g/7/

回答2:

My solution is to patch jQuery UI and redefine the slide behavior. This is my concept:

If one slider handle passes the boundary made up by the other slider handle during sliding: Instead of preventing the user from sliding further (normal jQuery UI behavior), act as if the user grabbed the other one. To put it simply: Swap the slider handles if neccessary.

This is my patch. It doesn't change much and most lines are identical to the original jQuery UI code.

$.widget('ui.slider', $.ui.slider, {

    _start: function( event, index ) {
        this.swapIndex = false;
        return this._super( event, index );
    },

    _slide: function( event, index, newVal ) {
        var otherVal,
            newValues,
            allowed;

        if ( this.options.values && this.options.values.length ) {
            if ( this.swapIndex ) {
                index = index ? 0 : 1;
            }
            otherVal = this.values( index ? 0 : 1 );

            if ( index === 0 && newVal > otherVal || index === 1 && newVal < otherVal ) {
                this.swapIndex = !this.swapIndex;
                index = index ? 0 : 1;
            }

            if ( newVal !== this.values( index ) ) {
                newValues = [];
                newValues[ index ] = newVal;
                newValues[ index ? 0 : 1 ] = otherVal;
                // 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
                } );
                if ( allowed !== false ) {
                    this.values( index, newVal );
                }
            }
        } 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 );
                }
            }
        }
    }
});

Live demo: http://jsfiddle.net/xykwup5a/

I prefer this solution for two reasons:

The jQuery UI fix in version 1.10.3 seems not to work if your values are negative
Better user experience: When not using the patch and two handles overlap the user can only move the handle in one direction and has to play around to increase the range in the other direction.

回答3:

This is not a permanent fix but helpful to make slider draggable agian.

$('#slider-range').slider
  start: (event, ui) ->
    # Only when sliders are overriding
    if ui.values[0] == ui.values[1]
     set_min = ui.values[0] - 0.1
     set_max = ui.values[1]
     # Deducing value of left slider by 0.1(or you can give step value based on your condition)
     $('#slider-range').slider('values', [set_min,set_max])
     return false
  slide: (event, ui) ->
    # Some statements
  stop: (event, ui) ->
    # Some statements

来源：https://stackoverflow.com/questions/16987473/jquery-ui-range-slider-bug

标签

jquery-ui

slider