CODEWITHSUNDEEP
javascriptjqueryjquery-uitooltip
crystyxn
crystyxn

Reputation: 1601

jQuery UI range slider tooltips

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

enter image description here

 <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. enter image description here

Upvotes: 0

Views: 4714

Answers (1)

Twisty
Twisty

Reputation: 30893

You need to combine two examples:

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.

Upvotes: 1

Related Questions