Jquery UI滑块如何使一个框跟随处理程序？

Question

我正在尝试创建一个应遵循处理程序的 div，如下所示： http://m1.dk/Priser/#tab:#calc,#abb< /a>

我的 JSfiddle: http://jsfiddle.net/z3xV3/2/

我还想对应该出现在框中的 UI 值进行计算。

这是我想要实现的目标的说明：

HTML:

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

Jquery:

$(document).ready(function() {


 // Pris slider
$("#slider").slider({value:'',min: 0,max: 150,step: 1, range: 'min',
    slide: function( event, ui ) {
        $( "#amount" ).html( ui.value + ' timer');
    }
});

    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );


});

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

最诚挚的问候！

Answer 2

我修改了你的jsfiddle示例：http://jsfiddle.net/Dr5UR/

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

我利用了滑块。

幻灯片事件有两个参数：

1. 事件

   该对象包含有关事件本身的多个信息。触发的时间、触发时刻按下的按键或者鼠标的坐标。 clientX 属性包含我们需要设置的移动对象的位置。

2. 用户界面

   ui 对象来自 jQuery UI 本身。它基本上只包含值。此外，它还包含用于拖动的锚点。但你不能使用它的位置，因为滑动事件在锚点到达新位置之前生效。

---

#slideValue 输入需要具有 position:absolute;，因为我使用 CSS 中的 left 位置属性。您还可以设置 margin-left 值，而无需将 position 设置为 absolute。

Answer 3

将其变成一个简单的 jQuery 插件实际上非常容易（而且非常有用）。像这样：

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

请注意，我通过在 #sliderValue 中输入值来添加对移动滑块的支持。

[ 代码示例已删除 ]

您也可以选择删除来自 HTML 的 #sliderValue 并让插件为您创建它。在这种情况下，您将重写该插件，以便在滑块上调用它，而不是在 #sliderValue 上调用。在我看来，这将是一个更简洁的解决方案。

更新

根据您的评论（并重新阅读您的问题），我重写了插件示例。

如果我理解正确的话，您想要根据滑块的值进行一些计算，并将这些计算的结果显示在滑块手柄下方的标签中。下面的内容应该会让这变得非常容易。

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

HTML

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

插件

(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）。

在上面的示例中，回调仅采用传递给回调的值并附加'%'。

Answer 4

这是一个带有两个手柄的滑块的工作示例

   $('#slider').slider({
        range: true,
        min: 500,
        max: 10000,
        step: 100,
        values: [1000, 2000],
        slide: function( event, ui ) {
            $('#min-price').html('
 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;
    }
}

 + ui.values[0]);
            $('#min_budget').val(ui.values[0]);
            $('#max-price').html('
 CSS：

 + 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：

Answer 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/

Answer 6

最好看看带有 jQ​​uery 插件的替代解决方案，例如：

• 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/

Answer 7

带上你的小提琴。

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


});

Answer 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" ) 是您的输入。