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

Ответ 1

ручка имеет ровно ширину за лотком

Больше похоже на половину его ширины, поэтому он действительно не двигается мимо конца слайдера. При правильном выравнивании ваших скриншотов вы увидите, что центр дескриптора находится в конце ползунка, как и я ожидаю, что он будет для очень точной настройки. Когда левый 0%, а правый - 100%, тогда дескриптор должен пройти немного до конца, чтобы позволить выбрать 100%.

Это то же самое при увеличении ручки. Когда в вашем случае рукоятка перемещается более чем на половину своей ширины над правым краем, я предполагаю, что он простирается меньше половины слева? Когда играет с CSS немного, я получаю тот же эффект с огромными ручками, например:

.ui-slider-horizontal .ui-state-default {
  /** Defaults: 
      margin-left: -0.6em;
      top: -0.3em;
  */
  width: 69px;
  height: 140px;
  margin-left: -39px;
  top: -68px;
}

Еще лучше показано с помощью стрелки, немного взлома:

.ui-slider-horizontal .ui-state-default {
  width: 40px;
  margin-left: -20px;
  top: 15px;
  background-color: white;
  background-image: url('http://i.stack.imgur.com/ObK9i.png');
  background-repeat: no-repeat;
  border: 0;
}

Тем не менее, как для вашего использования в качестве полосы прокрутки, см. демонстрационная версия прокрутки слайдера, которая, кажется, делает что ты хочешь? Используйте ползунок для управления позиционированием содержимого на странице. В этом случае он действует как полоса прокрутки с возможностью захвата значений, если это необходимо.

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

Я нашел решение. Но сначала: У меня была такая же проблема с одиночными ползунками и ползунками диапазона. Применение любого 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!

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

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

например:

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

Ответ 9

просто добавьте "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;
}