Question

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

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

以下是我想要实现的内容： enter image description here

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

我使用slider的幻灯片事件。

幻灯片事件有两个参数：

<强>事件

此对象包含有关事件本身的若干信息。触发时间，按下的键或触发时鼠标的坐标。 clientX 属性包含我们需要设置到移动对象的位置。
<强> UI

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

#slideValue输入需要position: absolute;，因为我使用CSS中的左侧位置属性。您还可以设置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）。

在上面的示例中，回调只是将传递给回调的value附加到'%'。

Answer 4

以下是带有两个手柄

的滑块的工作示例

enter image description here

   $('#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;
    }
}

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

用jQuery插件查看替代解决方案会很好，例如：

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


});

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" )是您的意见。

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

8 个答案:

更新