Prevent NoUISlider tooltips from overlapping

Question

The NoUISlider is a great working plugin, however I would like the tooltips to not overlap each other. I have the following which works, except for the overlapping tooltips.

$("#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/

I am thinking something like this would be nice: http://ionden.com/a/plugins/ion.rangeSlider/demo.html

Anyone got a clue?

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>