jQuery слайдер пузырь

Question

Кто-нибудь знает, как заставить пузырь появляться над ползунком jQuery, когда пользователь перемещает указатель ползунка? В идеале я хотел бы, чтобы оба указателя в ползунке диапазона имели свой собственный независимый пузырь. Пузырьки будут динамически показывать текущее выбранное значение указателя слайдера, перемещаемого пользователем. Это сложный вопрос!

Answer 1

Вот более простой способ:

$('#slider').slider({
  range: true,
  min: 0,
  max: 10,
  values: [0, 10],
  create: function(){
    var handle = jQuery(this).find('.ui-slider-handle');
    var bubble = jQuery('<div class="valuebox"></div>');
    handle.append(bubble);
  },
  slide: function(evt, ui) {
    ui.handle.childNodes[0].innerHTML = ui.value;
  }
});

Моя проблема состоит в том, чтобы получить начальное значение, отображаемое в пузыре, проблему, которую мне еще предстоит решить. Любая помощь приветствуется.

Answer 2

Html ..

  <div id="value1">&nbsp;</div>
  <div id="value2">&nbsp;</div>
  <div id="slider"></div>

CSS

#value1 { position:relative; }
#value2 { position:relative; }

Javscript ...

    $("#slider").slider({
            animate:false,
            range: true,
        values:[0,400],
        min: 0,
        max: 500,
        step: 1,
        change: function(event, ui) {
            updateValues(event,ui);
        },
        slide: function(event, ui) {
            updateValues(event,ui);
        }
    });

    function updateValues(event, ui)
    {
            var offset1 = $('.ui-slider-handle:first').offset();
            var offset2 = $('.ui-slider-handle:last').offset();
            var value1 = $('#slider').slider('values',0);
            var value2 = $('#slider').slider('values',1);
                        $('#value1').text(value1).css({'left':offset1.left});
                        $('#value2').text(value2).css({'left':offset2.left});
    }

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

Редактировать - я заметил, что анимация должна быть отключена для CSS, чтобы правильно отслеживать клики в самом слайдере (иначе не перетаскивать). Обновлен код и демо-версия, чтобы отразить необходимые изменения для отслеживания как нажатий на ползунке, так и перетаскивания.

Answer 3

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

$('#slider').slider({
  range: true,
  min: 0,
  max: 10,
  values: [0, 10]
});