j查询范围滑块值，它跟随句柄

Question

我正在使用jquery范围滑块，我设法在不同的输入中拆分了两个值。现在不要生我的气，我仍然对jquery一无所知，我想知道如何设置每个输入都遵循滑块上的句柄？

如以下示例所示：http://egorkhmelev.github.io/jslider/

到目前为止，我的代码如下所示：

脚本：

$(function() {
    $( ".slider-assets" ).slider({
        range: true,
        min: 100,
        max: 500,
        values: [ 200, 300 ],
        slide: function( event, ui ) {
            $( ".amount-assets1" ).val( ui.values[ 0 ] + "k €");
            $( ".amount-assets2" ).val( ui.values[ 1 ] + "k €" );
        }
        });
        $( ".amount-assets1" ).val($( ".slider-assets" ).slider( "values", 0 ) + "k €" );
        $( ".amount-assets2" ).val($( ".slider-assets" ).slider( "values", 1 ) + "k €" );
});

.html：

<input type="text" class="amount-assets1" />
<input type="text" class="amount-assets2" />
<div class="slider-assets"></div>

.css：

.amount-assets1,.amount-assets2{
    width: 48px;
}

你可以在这里看到和玩我的JSFIDDLE：http://jsfiddle.net/dzorz/sJBLh/

问题是我不知道从哪里开始。我是否需要另一个插件将工具提示放在手柄或其他东西上方？

欢迎任何建议和解决方案。

谢谢。

Answer 1

您需要使用事件函数指定工具提示句柄请参阅代码：

var sliderTooltip = function(event, ui) {
var curValue = ui.value || initialValue;
var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';
$('.ui-slider-handle').html(tooltip);

}

有关完整参考，请参见下面的演示：http://jsfiddle.net/npsingh/WQe98/

Answer 2

好的，

我已经设法让它工作了：http://jsfiddle.net/dzorz/X3DVv/

脚本有点复杂，但它有效：

    $(function() {
    $( ".slider-assets" ).slider({
        range: true,
        min: 100,
        max: 500,
        values: [ 200, 300 ],
        slide: function( event, ui ) {
            $( ".amount-assets" ).val( ui.values[ 0 ] + "k € - " + ui.values[ 1 ] + "k €");
            $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0]  + "k €" + '</div></div>');
            $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1]  + "k €" + '</div></div>');
        }
        });
        $( ".amount-assets" ).val($( ".slider-assets" ).slider( "values", 0 ) + "k € - " + $( ".slider-assets" ).slider( "values", 1 ) + "k €" );
        $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + $(".slider-assets").slider("values", 0)  + "k €" + '</div></div>');
        $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + $(".slider-assets").slider("values", 1)  + "k €" + '</div></div>');
});