Слайдер jQuery со значением на ручке перетаскивания - PullRequest
4 голосов
/ 27 апреля 2011

Я пытаюсь отобразить значение ползунка внутри маркера перетаскивания (ползунка). Любой предоставленный ресурс высоко ценится. Я использую jQuery 1.5.1

Спасибо

Ответы [ 3 ]

12 голосов
/ 27 апреля 2011

Вы используете jQuery UI Slider?

Если это так, то это решение:

$("#slider").slider({
    change: function() {
        var value = $("#slider").slider("option","value");
        $("#slider").find(".ui-slider-handle").text(value);
    },
    slide: function() {
        var value = $("#slider").slider("option","value");
        $("#slider").find(".ui-slider-handle").text(value);
    }
});

jsFiddle пример здесь

8 голосов
/ 12 сентября 2012

Просто хотел немного добавить к ответу.

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

   // take value from event, ui.value
   $("#slider1").slider({
      slide: function (event, ui) {
          $("#slider").find(".ui-slider-handle").text(ui.value);
      }
   });

   // sets text initially to value of slider, even if a default value is set
   $(document).ready(function() {
       var value = $("#slider").slider("option","value");
       $("#slider").find(".ui-slider-handle").text(value); 
   });
4 голосов
/ 14 сентября 2013

Спасибо, у меня есть решение для слайдера jQuery ui со значением перетаскивания разными ручками.
Пример для 2 ручек :

$("#wt-altitude-range").slider({
    range: true,
    min: 0,
    max: 3000,
    values: [ 100, 2500 ],
    slide: function(event, ui) {
        $(ui.handle).text(ui.value);
    }
});

Работа для слайдов. ui.handle - текущий дескриптор, ui.value - текущее значение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...