9

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

有人有线索吗？

4

1 回答 1

2

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

此外，我硬编码了工具提示将变为 1 的值，即差异为<= 5的时间。因为在那个值上，工具提示看起来是重叠的。你可以想出你自己的幻数。（也需要进行一些样式更改）。

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

滑块输出具有较低和较高值的数组 [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/

希望这可以帮助

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'
        });
    }
}
.tooltip {
	display: block;
	position: absolute;
	border: 1px solid #D9D9D9;
	font: 400 12px/12px Arial;
	border-radius: 3px;
	background: #fff;
	top: -43px;
	padding: 5px;
	left: -9px;
	text-align: center;
	width: 50px;
}
.tooltip strong {
	display: block;
	padding: 2px;
}
.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.css" rel="stylesheet"/>
<script src="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>
<div id="slider" style="margin-top: 50px"></div>

于 2015-06-15T14:38:18.773 回答