jQuery UI Range слайдер ошибка?

Question

Я столкнулся с интересной проблемой с слайдером jQuery UI. Мне нужно присвоить его минимальное и максимальное значения из sript и делаю следующее

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

Проблема возникает, когда Минь = MAXH. Появится кнопка MIN, которая находится в верхней части кнопки max. Невинный пользователь, который затем пытается увеличить максимальное значение, обнаруживает, что слайдер не реагирует, поскольку он/она фактически перетаскивает мини-кнопку за пределы текущего положения кнопки max. Что, если что-то можно сделать, чтобы обойти это?

Я использую jQuery UI 1.91 с jQuery 1.82 - У меня нет возможности перейти к jQuery 1.9, так как я использую плагины, которые используют объект браузера, который теперь выведен из jQuery.

Answer 1

Вы всегда можете остановить ползунки от перекрытия. Что-то вроде

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

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

Update Эта ошибка исправлена ​​в последнем jquery-ui

с использованием новейших Jquery-файлов UI http://code.jquery.com/ui/1.10.3/jquery-ui.js это работает.

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

Answer 2

Мое решение залатать JQuery UI и переопределить поведение слайд. Это моя концепция:

Если одна рукоятка ползунка проходит границу, образованную другой рукояткой ползунка во время скольжения: вместо предотвращения дальнейшего скольжения пользователя (нормальное поведение пользовательского интерфейса jQuery), действуйте так, как если бы пользователь схватил другую , Проще говоря: замените рукоятки слайдера, если это необходимо.

Это мой патч. Он не сильно меняется, и большинство строк идентичны исходному коду пользовательского интерфейса jQuery.

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

Живая демонстрация: http://jsfiddle.net/xykwup5a/

Я предпочитаю это решение по двум причинам:

1. Исправление JQuery UI в версии 1.10.3, кажется, не будет работать, если ваши значения являются отрицательными
2. Улучшенный пользовательский интерфейс: если вы не используете патч и накладываете две ручки, пользователь может только перемещать рукоятку в одном направлении и должен играть вокруг, чтобы увеличить диапазон в другом направлении.

Answer 3

Это не постоянное исправление, но полезно сделать слайдер перетаскиваемой агией.

$('#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