Перемещение диапазона в слайдере пользовательского интерфейса jQuery путем перетаскивания

Question

Я использую jQuery UI Slider в режиме диапазона. Есть ли способ (плагин / расширение / хак), чтобы позволить пользователю сместить диапазон (то есть изменить как нижний, так и верхний предел) без добавления дополнительной кнопки вне ползунка? В некоторых виджетах GUI это достигается перетаскиванием из центра (между двумя обработчиками).

Заранее спасибо.

Answer 1

Что ж, ответ Тимофея, похоже, не является ответом на вопрос, который был фактически опубликован.

Я также искал что-то похожее, что описал Герман, и кроме одного запроса на jQuery форум https://forum.jquery.com/topic/draggable-range-in-slider Я нашел запись в блоге, нацеленную на ту же проблему http://erraticdev.blogspot.com/2011/08/advanced-jquery-ui-range-slider.html

Расширение слайдера из этого поста в блоге позволяет блокировать маркеры слайдера, чтобы предотвратить превышение определенного максимального диапазона. Весь диапазон можно перемещать с помощью маркеров, а не перетаскивая «пробел» между маркерами.

Наконец, это не решило мою проблему, но это очень близко к решению.

Answer 2

См. Вопрос Перетащите ползунок диапазона диапазона ввода интерфейса пользователя .Для описанной функции rangeDrag описано расширение виджета-слайдера jQuery UI.

Answer 3

Если вы используете два текстовых поля для переустановки предельных переменных, вам нужно выполнить функцию события изменения, которая обнаружит любые изменения.

$('#rangeMod input:text').change(function() {

  // set range vars based on new input (you should also validate for (INT)).
  var txtbox1 = '...'; // based on first text box
  var txtbox2 = '...'; // based on second text box

  var range = [txtbox1, txtbox2];

  $('#my-slider')
     .slider("destroy") /* Destroy it Before Rebind/Re-Init */
     .slider({range:true, min: range[0], max: range[1], ... });
});