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

Based on the difference between the lower and upper values, hide one of the tooltips and make the other tooltip show both the values. (and of course make few changes in the styling to position them correctly).

Also, I hardcoded the value at which tooltips would become one, which is the when difference is <= 5. Because at that value it looks like the tooltips are overlapping. You can come up with your own magic number. (Some styling changes would be required too).

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

sliders outputs an array with lower and upper values [20.0, 40.0]

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

get the reference of other tooltip using .not()

if the difference between the values is <= 5 (magic number for overlapping tooltips) hide the other tooltip and show both the lower and upper values.

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

if the tooltips are far apart, then show the other tooltip and reset the css and display respective upper and lower values

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

The function would look like this overall

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

DEMO

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

Hope this helps

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>

防止NoUISlider工具提示重叠

1 个答案:

DEMO