Как остановить слайдер jquery UI от скольжения за пределы желоба?

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

<div class="cap left"></div>
(slider container here)
<div class="cap right"></div>

Просто добавьте очень простой CSS...

.cap {
    width: (half the handle width)
}
.ui-slider, .cap.left, .cap.right {
    float: left;
}
.ui-slider {
    width: (desired total gutter width - handle width);
}
.ui-slider-handle {
    margin-left: -(half the handle width);
}

... затем соответствующим образом создайте свои колпачки.

Для затенения диапазона на одном слайдере просто создайте левую крышку с эффектом диапазона вместо обычного желоба.

У меня была такая же проблема, и мое решение очень просто, я думаю. Как сказал д-р Гиббс, в качестве по умолчанию для переносимого ползунка для переносимого ползунка установлен "родительский". Поэтому вы можете преодолеть это, используя css...

считать handle img is 100px, а сдерживание div равно 250px. Чем удержание div должно иметь значение ширины 250 - 100 = 150px и margin-right:100px, чтобы maxZoom img отображался на правильном месте. Чем у вас есть точный предел для изображения вашей ручки...

я понимаю, что это старый пост, но я нашел гораздо более простое решение, когда столкнулся с этой проблемой:

так как дескриптор является чисто визуальным элементом, установите margin-left на минус половина width дескриптора. теперь он будет правильно центрироваться на концах направляющей.

например:

#slider-handle { width: 4rem; margin-left: -2rem; }

Простым способом я обработал его, чтобы сделать слайдер дорожкой прозрачным и добавить фоновый слой, который я мог бы создать отдельно.

HTML

<div class="slider-container">
  <div class="slider-background"></div>
  <div id="slider"></div>
</div>

CSS

.slider-container {
  position: relative;
}
.slider-background {
  position: absolute;
  top: 0;
  left: 10px;
  background: blue;
}
#slider {
  background: transparent;
}

Для меня это работает:

var $Slide = jQuery('#StatusSlide');
$Slide.slider({
  slide: function(event, ui) {
    /* Fix handler to be inside of slider borders */
    var $Handle = $Slide.find('.ui-slider-handle');
    $Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value') / $Slide.slider('option', 'max')));
  }
});
/* Fix handler to be inside of slider borders */
var $Handle = $Slide.find('.ui-slider-handle');
$Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value') / $Slide.slider('option', 'max')));

Я нашел решение. Но сначала: У меня была такая же проблема с одиночными ползунками и ползунками диапазона. Применение любого CSS не будет работать, а также никакого Javascript-Fix-Approach.

РЕШЕНИЕ для меня было: Площадь скольжения составляет 100% от ширины полосы прокрутки. Поэтому, когда ваш слайдер шириной 100 пикселей, и вы установите его на "50", "маржа-левый" дескриптора составляет 50%. Когда его 200px, установленный на 20, его 10%... и т.д.

Я искал этот фрагмент кода, который вычислял левый рычаг дескриптора, уменьшал и добавлял стандартную левую руку.

Откройте jquery-ui.js с помощью редактора по вашему выбору и перейдите к строке ~ 13170 и найдите функция _refreshValue. Вы также можете найти первый вид "valPercent", После строки "valPercent =....." я добавил следующее:

valPercent = valPercent * 0.95 + 3.1;

Это отлично справлялось с моей обработкой в ​​пределах диапазона и желоба. Возможно, вам нужно поиграть со значениями, чтобы получить оптимальные настройки в зависимости от используемого ui-шаблона, но, по крайней мере, этого

Поскольку мне нужна репутация для отправки изображений, вот ссылка на то, что я нарисовал для вас.

http://www.germanunique.com/slider.png

Если вам нужна помощь в этом, вы можете написать мне письмо на [email protected] или оставить ответ. Это был мой первый пост в StackOveflow, я надеюсь, что это поможет тем, у кого такая же проблема.

BYE!

Или вы можете сделать это с помощью математики, например:

slide: function(event, ui) {
    $(ui.handle).html("<span class='ui-corner-all hover'>"+ui.value+"</span>");
    fix_slider(ui.handle,ui.value);
},
function fix_slider(slider,value) {
    var $.slider_decalatio = 0.35 // for an width of 27px
    var pos_calc = $.slider_decalation * value; // y = ax;
    $(slider).find('span').css("left",pos_calc + "px");
});

Это можно улучшить, но это быстрое решение.

просто добавьте "padding-right" к ползунку, который равен количеству элемента класса .ui-slider-handle.

#slider {
 height: 20px;
 width: 150px;
 background: #ccc;
 padding-right: 20px; (equal to the width of the handle below)
}
.ui-slider .ui-slider-handle {
  height: 20px;
  width: 20px;
  background: #333;
  display: block;
  position: relative;
}