Jquery Ui slider add custom text tooltips

Question

I want to show a custom tooltips when slider is dragged on each value. Eg: there are in total 5 rating values "Average", "Below Average" , "Good", "Bad" ,"Too bad". So if I drag to the value 4, the tooltip should show the Bad text

Example : https://codepen.io/dpdknl/pen/QggQRq

Here is my code

    <div id="slider1"></div>
    
    $(function () {
                $("#slider1").slider({
                    min: 0,
                    max: 5,
                    orientation: "horizontal",
                    range: "min",
                    animate: true,
                    stop: function (event, ui) {
                        alert(ui.value);
                    }
 if (ui.value < 1) {
    greeting = "Average";
  } else if (ui.value < 2) {
    greeting = "Below Average";
  } else {
    greeting = "Good";
  }
                });
            });

Answer 1

I think you have to create a new Tag while you are creating, sliding or stopping. The following solution use the callback function of the jquery ui slider.

$(function() {
  $("#slider1").slider({
    min: 1,
    max: 5,
    orientation: "horizontal",
    range: "min",
    animate: true,
    create: handleSliderText,
    slide: handleSliderText,
    stop: handleSliderText
  });

  function handleSliderText(event, ui) {
    var greeting,
      colorClass,
      slider = $(event.target),
      value = parseInt(ui.value || slider.slider('value'));

    if (value == 1) {
      greeting = 'Strongly Disagree';
      colorClass = 'red';
    } else if (value == 2) {
      greeting = 'Disagree';
      colorClass = 'red';
    } else if (value == 3) {
      greeting = 'Not sure';
      colorClass = 'orange';
    } else if (value == 4) {
      greeting = 'Agree';
      colorClass = 'green';
    } else {
      greeting = 'Strongly Agree';
      colorClass = 'green';
    }

    var infoBox = getInfoBox(slider);
    infoBox.removeClass(['red','orange','green']).addClass(colorClass).text(greeting);
  }

  function getInfoBox(slider) {
    var infoBox = slider.find('.info-box');

    if (infoBox.length) {
      return infoBox;
    }

    infoBox = $('<div></div>').addClass('info-box');
    slider.find('.ui-slider-handle').html(infoBox);

    return infoBox;
  }

});

.ui-slider {
  margin: 50px 80px;
}

.ui-slider .info-box {
  position: absolute;
  margin: -12px 0 0 8px;
  padding: 5px 20px;
  background-color: #888;
  color: #fff;
  transform: translate(-50%, -100%);
  text-align: center;
  white-space: nowrap;
  border-radius: 100px;
}

.ui-slider .info-box.red {
  background-color: #f00;
}

.ui-slider .info-box.orange {
  background-color: #f80;
}

.ui-slider .info-box.green {
  background-color: #0c0;
}

.ui-slider .info-box.red::before {
  border-top-color: #f00;
}

.ui-slider .info-box.orange::before {
  border-top-color: #f80;
}

.ui-slider .info-box.green::before {
  border-top-color: #0c0;
}

.ui-slider .info-box::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  border: 10px solid #888;
  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider1"></div>

Answer 2

Beside stop, JQuery offers another nifty event which comes in handy in your case: slide. It gets fired as soon as the handle of the slider is dragged to a new position. Inside it's callback handler you can change the text of the tooltip according your needs.

The tooltip itself can be any HTML element capable of displaying text. There are several ways to put the tooltip near the slider's handle. One easy way is appending it to the handle thus making it a child element.

Since the tooltip should be a tooltip, you can use the slider's start and stop events to show or hide it accordingly.

Here's an example:

$(function() {
  function updateTooltip(value) {
    if (value < 1) {
      tooltip.text("Below Average");
    } else if (value < 2) {
      tooltip.text("Average");
    } else {
      tooltip.text("Good");
    }

    tooltip[0].style.left = parseInt(slider.find(".ui-slider-handle").width() / 2 - tooltip.width() / 2) + "px";
  }

  var tooltip = $('.tooltip');
  var slider = $('#slider1');
  tooltip.hide();

  $("#slider1").slider({
    min: 0,
    max: 5,
    orientation: "horizontal",
    range: "min",
    animate: true,
    stop: function(event, ui) {
      tooltip.fadeOut('fast');
    },
    start: function(event, ui) {
      updateTooltip(ui.value);
      tooltip.fadeIn('fast');
    },
    slide: function(event, ui) {
      updateTooltip(ui.value);
    }
  }).find(".ui-slider-handle").append(tooltip);
});

.tooltip {
  position: absolute;
  top: -30px;
  color: #000000;
  background-color: #eeeeee;
  border-radius: 3px;
  border: 1px solid #333333;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label class="tooltip"></label>
<div id="slider1" style="width:80%;margin:50px"></div>