防止NoUISlider工具提示重叠

Question

NoUISlider是一个很棒的工作插件,但是我希望工具提示不会相互重叠.我有以下工作,除了重叠的工具提示.

$("#slider").noUiSlider({
range: { min: 0, max: 100 },
step: 5,
connect: true,
start: [ 20, 50 ]
});

$("#slider").Link('lower').to('-inline-<div class="tooltip"></div>', function(value){
$(this).text(  "From: "+value );
});


$("#slider").Link('upper').to('-inline-<div class="tooltip"></div>', function(value){
$(this).text(  "From: "+value );
});

http://jsfiddle.net/q5651786/2/

我认为这样的事情会很好:http://ionden.com/a/plugins/ion.rangeSlider/demo.html

有人知道吗？

Answer 1

根据下限值和上限值之间的差异，隐藏一个工具提示并让另一个工具提示显示这两个值。（当然，对样式进行一些更改以正确定位它们）。

另外，我对工具提示变为 1 的值进行了硬编码，即差异<= 5时的值。因为在该值下，工具提示看起来像是重叠的。你可以想出你自己的神奇数字。（也需要进行一些样式更改）。

function sliderHandler(value, handle, slider){
    var values = slider.val();

sliders 输出一个具有下限值和上限值的数组 [20.0, 40.0]

    var othertooltip = $('.tooltip').not($(this));

使用.not()获取其他工具提示的引用

如果值之间的差异 <= 5（重叠工具提示的幻数）隐藏其他工具提示并显示下限值和上限值。

    if(values[1]-values[0] <= 5){
        othertooltip.hide(); // <--- this hides the other tooltip
        $(this).text("From: " + values[0] + '-' + values[1]) <--- this shows both the values 
        .css({ // <--- styles appropriately
            'width': '80px',
            'left': '-20px'
        });

如果工具提示相距较远，则显示另一个工具提示并重置 CSS 并显示各自的上限值和下限值

    }else{
        othertooltip.show(); // <--- show other tooltip
        $(this).text("From: " + value) // <--- display only local value
        .css({ // <--- reset the styling
            'width': '50px',
            'left': '-9px'
        });
    }
}

该函数总体看起来像这样

var slider = $("#slider").noUiSlider({
    range: {
        min: 0,
        max: 100
    },
    step: 5,
    connect: true,
    start: [20, 50]
}).Link('lower').to('-inline-<div class="tooltip"></div>', sliderHandler)
  .Link('upper').to('-inline-<div class="tooltip"></div>', sliderHandler);

function sliderHandler(value, handle, slider){
    var values = slider.val();
    var othertooltip = $('.tooltip').not($(this));
    if(values[1]-values[0] <= 5){
        othertooltip.hide();
        $(this).text("From: " + values[0] + '-' + values[1])
        .css({
            'width': '80px',
            'left': '-20px'
        });
    }else{
        othertooltip.show();
        $(this).text("From: " + value)
        .css({
            'width': '50px',
            'left': '-9px'
        });
    }
}

演示版

http://jsfiddle.net/dhirajbodicherla/q5651786/4/

希望这可以帮助

function sliderHandler(value, handle, slider){
    var values = slider.val();

    var othertooltip = $('.tooltip').not($(this));

    if(values[1]-values[0] <= 5){
        othertooltip.hide(); // <--- this hides the other tooltip
        $(this).text("From: " + values[0] + '-' + values[1]) <--- this shows both the values 
        .css({ // <--- styles appropriately
            'width': '80px',
            'left': '-20px'
        });