Ползунок jQuery UI с двумя ручками - получить исходные данные

Question

Ползунок jQuery UI с двумя ручками - получить исходные данные

0

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

var sliderTooltip = function(event, ui) {
    var curValue = ui.value ;
    var tooltip = htmltext;
    $(ui.handle).html(tooltip);

};
$("#slider").slider({
    range: true,
    min: 0,
    max: 1500000,
    values: [30000, 150000],
    create: showTooltips, 
    slide: sliderTooltip

Когда слайдер создан, мне нужно получить значения ручек и поместить их в всплывающие подсказки. Но как я могу получить значения каждого из них? Насколько я вижу, объект "ui" пуст при инициализации до тех пор, пока не изменится силос. Я также попытался вызвать событие смены слайдера следующим образом:

$('#slider').trigger('slidechange');

или

$('#slider').trigger('change')

Но, похоже, это не имело никакого эффекта. Как я могу это сделать?

Paul 05 дек. 2013, в 10:38

Источник

Теги:

javascript

jquery

jquery-ui

1 ответ

Ещё вопросы

Anto Jurković · Accepted Answer · 2013-12-05T17-05-00.000Z

Проверьте пример в jsBin.

Я использую событие create для прикрепления всплывающих подсказок. См. Код.

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

<div id="slider" style="margin:50px" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
    <div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 2%; width: 8%;"></div>
    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 2%;">
        <div class="ui-slider-tooltip" style="position: absolute; top: -25px; left: -25px;"></div>
    </a>
    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 10%;">
        <div class="ui-slider-tooltip" style="position: absolute; top: -25px; left: -25px;"></div>
    </a>
</div>

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

$(event.target).find('.ui-slider-handle')[i]

и firstChild для достижения конкретной подсказки и установки правильного значения.

Скорее всего, есть более элегантный способ сделать это.

Спасибо за подробное объяснение! Это было полезно.