как предотвратить перекрытие меток ползунка?

Question

нужна помощь, я использую слайдер jquery-ui. я сейчас:

и, должно быть: Спасибо за помощь.

Метод обновления меток обработчиков для моего слайдера плагина:

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

бит структуры слайдера:

$(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>') 

Я также добавил реализации для моей проблемы (то, что я ожидал)

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. Положить Л.Л. метка в массиве

2. магазин каждый «ширина» вашего лейбла

3. Сортировка данных по времени и проверить от начала видео/воспроизведения,

4. Если метка «В» в диапазон этикетки «A», затем поднимите метку «B» вверх

5. если ваша метка «C» находится в диапазоне от метки «A» и на этикетке «B», затем поднимите ярлык вверх * (число в диапазоне)

в случае CSS вам нужно создать класс Shift1, Shift2, Shift3, ... с разной позицией y (думаю, вам может понадобиться максимум 6, иначе никто не сможет увидеть вещь над вашим слайдером)