jQuery UI range slider tooltips

Question

How can I get my jQuery UI range slider to display tooltips on top of the markers like so:

 <span class="tooltip"></span> <div id="slider-range"></div>
 <button id="reset" type="button" class="btn btn-success" onclick="reset_slider('#slider-range')">Reset</button>

Here is the script so far:

$(document).ready(function() {
     $("#slider-range").slider({
         min: 0,
         max: 1000,
         step: 1,
         range: true,
         values: [0, 1000],
         slide: function(event, ui) {
             for (var i = 0; i < ui.values.length; ++i) {
                 $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
             }
         }
     });

     $("input.sliderValue").change(function() {
         var $this = $(this);
         $("#slider-range").slider("values", $this.data("index"), $this.val());

     });
 });

Here is how it looks right now, all its missing is the tooltips on top.

Answer 1

You need to combine two examples:

• http://jqueryui.com/slider/#range
• http://jqueryui.com/tooltip/#custom-style

Working example: https://jsfiddle.net/Twisty/c90ee4xe/

HTML

<div class="wrapper">
  <div id="slider-range">
  </div>
  <a href="" id="reset" class="btn btn-success">Reset</a>
</div>

CSS

.wrapper {
  display: block;
  padding: 3px;
  margin-top: 20px;
}

#slider-range {
  width: 75%;
  margin: 20px;
}

#slider-range .ui-slider-handle {
  background: #0e6;
  border-radius: 6px;
}

#slider-range .ui-slider-handle.ui-state-active {
  border: #093;
}

#slider-range .ui-slider-range {
  background: #093;
}

.ui-tooltip,
.arrow:after {
  background: #000;
}

.ui-tooltip {
  color: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}

.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}

.arrow.top {
  top: -16px;
  bottom: auto;
}

.arrow.left {
  left: 20%;
}

.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  box-shadow: 6px 5px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow.top:after {
  bottom: -20px;
  top: auto;
}

#reset {
  color: #fff;
  background: #090;
  border-radius: 6px;
  font-family: verdana;
  font-weight: bold;
  display: inline-block;
  padding: .25em;
  text-decoration: none;
}

JavaScript

$(document).ready(function() {
  $("#slider-range").slider({
    min: 0,
    max: 1000,
    step: 1,
    range: true,
    values: [0, 1000],
    slide: function(event, ui) {
      var low, high;
      low = $(this).slider("values", 0);
      high = $(this).slider("values", 1);
      $(this).tooltip("option", "content", low + ":" + high);
    }
  });

  $("#slider-range").tooltip({
    items: ".ui-slider",
    content: "0:1000",
    position: {
      my: "center bottom-20",
      at: "center top",
      using: function(position, feedback) {
        $(this).css(position);
        $("<div>")
          .addClass("arrow")
          .addClass(feedback.vertical)
          .addClass(feedback.horizontal)
          .appendTo(this);
      }
    }
  });

  $("#reset").click(function(e) {
    e.preventDefault();
    $("#slider-range").slider("values", [0, 1000]).tooltip("option", "content", "0:1000").tooltip("close");
  });
});

For the Slider, we do most everything the same. Just in slide we update the content of the tooltip instead of fields.

For this example, we're only using 1 tooltip on 1 slider. If you have multiple sliders, see: http://jqueryui.com/tooltip/#custom-content It will be more complex. If you have a smaller number of sliders, you can just make a tooltip for each. Otherwise it'll need the item option set and some ways to tie specific sliders to their tooltip.

The tooltip is pretty straight forward. We'll set the content to our intial value since we know it will be changed later. We also set the position that will be fluid. This helps move the tooltip above or below depending on the feedback and we style the arrow to correspond.