how to prevent overlapping of labels of slider?

Question

need help, I am using jquery-ui slider. I have now:

and, must be: Thanks for the help.

Method for update labels of handlers for my slider plugin:

updateLabelsOfHandlers: function() {

            var scope = this.data('scope');
            this.find('#min').text(scope.params.minLoanAmount);
            this.find('#max').text(scope.params.maxLoanAmount);    
            this.find('div.sliderLabel-value').remove();

            if (scope.sliderValue.length === 0) {
                this.find('#slider a:eq(0)').hide();
            }

            for (i = 0; i < scope.sliderValue.length; i++) {
                var chield = this.find('#slider a:eq(' + i + ')');
                chield.html('<div class="sliderLabel-value">' + scope.sliderValue[i] + '</div>');
            }
            },

bit of slider structure:

$(this).append(
                        '<div class="sliderContainer">'+
                            '<div id="sliderInfo">'+
                            '</div>'+
                            '<div class="sliderColumn-center">'+
                                '<div id="slider"></div>'+
                            '</div>'+
                            '<div id="leftDiv" class="sliderColumn-left">'+
                                '<div id="min"></div>'+
                            '</div>'+
                            '<div class="sliderColumn-right">'+
                                '<div id="max"></div>'+
                            '</div>'+
                        '</div>')

I also added implementation for my problem (is what I expected)

updateLabelsOfHandlers : function() {

                var scope = this.data('scope');
                this.find('#min').text(scope.params.minLoanAmount);
                this.find('#max').text(scope.params.maxLoanAmount);    
                this.find('div.sliderLabel-value').remove();
                var labelsPositions = [];

                if (scope.sliderValues.length === 0) {
                    this.find('#slider a:eq(0)').hide();
                }

                for (i = 0; i < scope.sliderValues.length; i++) {
                    var chield = this.find('#slider a:eq(' + i + ')');
                    chield.html('<span class="sliderLabel-value">' + scope.sliderValues[i] + '</span>');
                    var sliderLabel = chield.find('.sliderLabel-value');
                    labelsPositions.push({sliderLabel:sliderLabel,width:sliderLabel.width(), left:chield.position().left, height:sliderLabel.height()});
                }

                var bottomShift = labelsPositions.length > 0 ? parseInt(labelsPositions[0].sliderLabel.css('bottom')) : 0;

                for (i = 1; i < labelsPositions.length; i++) {
                    for (j = 0; j < i; j++) {

                        var leftLabelBottom = parseInt(labelsPositions[j].sliderLabel.css('bottom'));
                        var rightLabelBottom = parseInt(labelsPositions[i].sliderLabel.css('bottom'));
                        var leftLabelSize = labelsPositions[j].left + labelsPositions[j].width;  
                        var rightLabelSize = labelsPositions[i].left;


                        if (leftLabelSize > rightLabelSize && leftLabelBottom === rightLabelBottom) {
                            bottomShift += labelsPositions[j].height;
                            labelsPositions[i].sliderLabel.css("bottom", bottomShift + 'px');
                        }
                    }
                }
            },

Answer 1

1. Put all label in array

2. Store each 'width' of your label

3. Sorting your data by time and check from start of video / player,

4. If your label 'B' is in the range of label 'A',then lift label 'B' up

5. if your label 'C' is in the range of label 'A' and label 'B', then lift label by up * (number in range)

in case for CSS you need to create class of Shift1, Shift2, Shift3, ... with different y position (I think you might need 6 at the most, otherwise no one can see the thing over your slider )