JQuery UI слайдер, как сделать окно следовать за обработчиком?

Ответ 1

Я надеюсь, что эффект, который вы ищете: http://jsfiddle.net/z3xV3/11/

JS

$(document).ready(function() {

    $("#slider").slider({value:'', min: 0, max: 150, step: 1, range: 'min'});

    var thumb = $($('#slider').children('.ui-slider-handle'));   
    setLabelPosition();    

    $('#slider').bind('slide', function () {        
        $('#sliderValue').val($('#slider').slider('value'));
        setLabelPosition();
    });

    function setLabelPosition() {
        var label = $('#sliderValue');
        label.css('top', thumb.offset().top + label.outerHeight(true));
        label.css('left', thumb.offset().left - (label.width() - thumb.width())/ 2);  
    }

});

HTML

<div id="slider"></div>
<input id="sliderValue" />

CSS

#sliderValue {
    position:absolute;
    width: 50px;
}

С уважением!

Ответ 2

Я модифицировал ваш пример jsfiddle: http://jsfiddle.net/Dr5UR/

$("#amount").val("$" + $("#slider").slider({
    slide: function(event, ui) {
        $('#sliderValue').css('left', event.clientX).val(ui.value);
    }
}));

Я использую событие слайда slider.

Событие слайда получило два аргумента:

• событие

  Этот объект содержит несколько сведений о самом событии. Время запуска, нажатая клавиша или координаты мыши в момент запуска. Свойство clientX содержит позицию, которую мы должны установить для движущегося объекта.

• щ

  Объект ui принадлежит самому пользовательскому интерфейсу jQuery. Он просто содержит значение. Кроме того, он содержит якорь, который также используется для перетаскивания. Но вы не можете использовать его положение, потому что событие слайда вступит в силу до того, как привязка займет свое новое положение.

Вход #slideValue должен иметь position: absolute;, поэтому я работаю с атрибутом левой позиции в CSS. Вы также можете установить значение margin-left, без необходимости устанавливать position в absolute.

Ответ 3

На самом деле довольно просто (и очень полезно) превратить это в простой плагин jQuery. Например:

JSFiddle: http://jsfiddle.net/PPvG/huYRL/

Обратите внимание, что я добавил поддержку перемещения слайдера, введя значение в #sliderValue.

[Удален образец кода]

Вы также можете удалить #sliderValue из HTML и позволить плагину создать его для вас. В этом случае вы должны переписать плагин так, чтобы он вызывается на слайдере, а не на #sliderValue. На мой взгляд, это было бы гораздо более аккуратным решением.

Update

Основываясь на ваших комментариях (и перечитывая ваш вопрос), я переписал пример плагина.

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

JSFiddle: http://jsfiddle.net/PPvG/q5qg7/

HTML

<div id="slider"></div>

Plugin

(function($) {

    $.fn.sliderLabel = function(options) {

        var settings = $.extend({
            marginTop: 2,
            // Margin between the slider handle and the label (in pixels)
            callback: function(value) {
                return 'Value: ' + value;
            }
        }, options);

        return this.each(function() { // <- maintains chainability
            var slider = $(this);
            var handle = slider.children('.ui-slider-handle');
            var data = slider.data('sliderLabel');

            if (handle.length === 0) {
                // $(this) isn't a slider (it has no handle)
                console.log('[SliderLabel] Error: sliderLabel() can only be called on a slider.');
                return;
            }

            if (data === undefined) {
                // First time sliderLabel() is called on this slider
                data = {
                    label: $('<div class="ui-slider-label" />').css('position', 'absolute'),
                    callback: settings.callback
                };

                data.label.insertAfter(slider);

                function updateLabel() {
                    var value = slider.slider('value');
                    var labelText = data.callback(value);

                    data.label.html(labelText);
                    data.label.css('top', handle.offset().top + handle.outerHeight() + settings.marginTop);
                    data.label.css('left', handle.offset().left - ((data.label.width() - handle.width()) / 2));
                }

                updateLabel();
                slider.bind('slide', updateLabel);

            } else {
                // sliderLabel() was called before; just update the callback:
                data.callback = settings.callback;
                updateLabel();
            }

            // Save (or update) the data inside the slider:
            slider.data('sliderLabel', data);
        });
    }
})(jQuery);

Использование

$("#slider").slider();

$("#slider").sliderLabel({
    callback: function(value) {
        return value + '%';
    }
});

Как вы можете видеть, теперь плагин вызывается на самом слайдере. Теперь вы можете предоставить плагину обратный вызов, который позволяет выполнять некоторые вычисления и возвращать правильно отформатированную метку (разрешен HTML).

В приведенном выше примере обратный вызов просто принимает value, который передается обратному окну и добавляет '%'.

Ответ 4

Вот рабочий пример слайдера с двумя дескрипторами

   $('#slider').slider({
        range: true,
        min: 500,
        max: 10000,
        step: 100,
        values: [1000, 2000],
        slide: function( event, ui ) {
            $('#min-price').html('$' + ui.values[0]);
            $('#min_budget').val(ui.values[0]);
            $('#max-price').html('$' + ui.values[1]);
            $('#max_budget').val(ui.values[1]);
            }

            //move labels when handles are moved
            moveValueLabels();
        }
    });

    //move the value labels directly under the handles
    function moveValueLabels() {
        var pos_first_handle = $('.ui-slider-handle:first').position();
        var pos_last_handle = $('.ui-slider-handle:last').position();
        $('#min-price').css('left', (pos_first_handle.left - ($('#min-price').width()/2)));
        $('#max-price').css('left', (pos_last_handle.left - ($('#max-price').width()/2)));
    }

    //set initial positioning of labels when page is loaded
    moveValueLabels();

CSS

#slider {
    overflow: visible;
    #min-price {
        position:absolute;
        top:20px;
        font-weight: bold;
        padding:0;
    }
    #max-price {
        position:absolute;
        top:20px;
        font-weight: bold;
        padding:0;
    }
}

Ответ 5

HTML:

<div id="slider"></div>

CSS

#slider {
    width: 200px;
}
#sliderValue {
    position: absolute;
    left: 0;
    bottom: -30px;
    width: 40px;
}

JQuery

$("#slider").slider({
    value: '',
    min: 0,
    max: 100,
    range: 'min',
    create: function (event, ui) {
        $('.ui-slider-handle').append('<input id="sliderValue" />');
    },
    slide: function (event, ui) {
        $("#sliderValue").val(ui.value);
    }
});

http://jsfiddle.net/yBfTy/4/

Ответ 6

Было бы неплохо взглянуть на альтернативные решения с плагинами jQuery, например:

• http://craigsworks.com/projects/qtip2/demos/#ui-slider

• http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

Ответ 7

Взяв ваш jsfiddle.

HTML:

<div id="slider"></div>
<input id="sliderValue" />

CSS

#sliderValue{width:50px;}

Jquery:

$(document).ready(function() {


 // Pris slider
$("#slider").slider({value:'',min: 0,max: 150,step: 1, range: 'min',
    slide: function( event, ui ) {
        $( "#sliderValue" ).val( ui.value + ' timer');
        var offset = $(this).find('a').css("left");
        $("#sliderValue").css("margin-left", offset);
    }
});

    $( "#sliderValue" ).val($( "#slider" ).slider( "value" ));


});

Ответ 8

Вы можете просто: http://jsfiddle.net/z3xV3/21/

$(document).ready(function() {
    $("#slider").slider({
        value:0,
        min: 0,
        max: 150,
        step: 1,
        range: 'min',
        slide: function( event, ui ) {
            var offsetLeft = $(this).find(".ui-slider-handle").offset().left;
            $( "#sliderValue" )
                .val( ui.value + ' timer')
                .css({
                    "position": "absolute",
                    "left": offsetLeft
                });
        }
    });
});

Обратный вызов слайда вызывается каждый раз, когда вы перемещаете свой дескриптор:

offsetLeft - это смещение дескриптора.

$( "#sliderValue" ) - ваш вход.