Slider with label and tooltip

Slider with label and tooltip

by Ayyappan Sakthivadivel

HTML

<div class="scroll-wrap">
  <div id="infi-slider">
  </div>
</div>

CSS

#infi-slider {
    width: inherit;
    margin: inherit;
}
        
        #infi-slider label {
            position: absolute;
            width: 20px;
            margin-left: -10px;
            text-align: center;
            margin-top: 30px;
        }
        
        .tooltip-slider {
            position: absolute;
            z-index: 1020;
            display: block;
            padding: 5px;
            font-size: 11px;
            visibility: visible;
            margin-top: -2px;
            bottom: 120%;
            margin-left: -8px;
        }
        
        .tooltip-slider .tooltip-slider-arrow {
            bottom: 0;
            left: 50%;
            margin-left: -5px;
            border-top: 5px solid #000000;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            position: absolute;
            width: 0;
            height: 0;
        }
        
        .tooltip-slider-inner {
            max-width: 200px;
            padding: 3px 8px;
            color: #ffffff;
            text-align: center;
            text-decoration: none;
            background-color: #000000;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }
        
        .ui-slider-tick-mark {
            display: inline-block;
            width: 1px;
            background: black;
            height: 16px;
            position: absolute;
            top: 15px;
            z-index: 9;
        }
        
        .ui-slider-tick-mark2 {
            display: inline-block;
            width: 1px;
            background: black;
            height: 8px;
            position: absolute;
            top: 15px;
            z-index: 9;
        }
        
        #infi-slider.ui-slider-horizontal .ui-slider-handle {
            z-index: 99;
        }
        
        /**/
        
        #infi-slider.ui-slider-horizontal .ui-slider-handle{
          width: 100%;
       ...

JavaScript

var initialValue = 0;
    var sliderTooltip = function(event, ui) {
    var tooltip;
    var curValue = ui.value || initialValue;
    if(curValue!=0 && curValue<100){
        tooltip = '<div class="tooltip-slider"><div class="tooltip-slider-inner">' + curValue + 'K</div><div class="tooltip-slider-arrow"></div></div>';
    }
    else if(curValue==100) {
         tooltip = '<div class="tooltip-slider"><div class="tooltip-slider-inner">1L</div><div class="tooltip-slider-arrow"></div></div>';
    }   
    else{
            tooltip = '<div class="tooltip-slider"><div class="tooltip-slider-inner">' + curValue + '</div><div class="tooltip-slider-arrow"></div></div>';
        }
        setSliderTicks(event.target);
        $('.ui-slider-handle').html(tooltip);
}

$( "#infi-slider" ).slider({
		range: "min",
		value: initialValue,
		min: 0,
		max: 100,
		step: 5,
        slide: sliderTooltip, 
        create:sliderTooltip
})

.each(function() {
  var opt = $(this).data().uiSlider.options;
  var vals = opt.max - opt.min;
  for (var i = 0; i <= vals; i+=10) {
      var el;
      if(i!=0 && i<100){
         el = $('<div class="ui-slider-tick-mark"></div>' + '<label>'+(i+0)+'K</label>').css('left',(i/vals*100)+'%'); 
      }
      else if(i==100)
      el = $('<div class="ui-slider-tick-mark"></div>' + '<label>1L</label>').css('left',(i/vals*100)+'%');
      else
      {
          el =  $('<div class="ui-slider-tick-mark"></div>' + '<label>'+(i+0)+'</label>').css('left',(i/vals*100)+'%');
      }
      $( "#infi-slider" ).append(el);
  }
});

function setSliderTicks(el) {
    var $slider =  $(el);
    var max =  $slider.slider("option", "max");    
    var min =  $slider.slider("option", "min");    
    var spacing =  100 / (max - min);

    $slider.find('.ui-slider-tick-mark2').remove();
    for (var i = 0; i < max-min ; i+=5) {
        $('<span class="ui-slider-tick-mark2"></span>').css('left', (spacing * i) +  '%').appendTo($slider); 
     }
}