JSFiddle - React, Tailwind, and code Playground

by mikeyai

HTML

<script src="http://twitlabs.net/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitlabs.net/bootstrap/css/bootstrap.min.css">
  <div class="container">
    <div class="span6 offset1">
        <div id="slider"></div>
    </div>
  </div>

CSS

#slider {
  width: 500px;
}

.container {
    margin-top: 100px;
}

JavaScript

function repositionTooltip( e, ui ){
        var div = $(ui.handle).data("tooltip").$tip[0];
        var pos = $.extend({}, $(ui.handle).offset(), { width: $(ui.handle).get(0).offsetWidth,
                                                        height: $(ui.handle).get(0).offsetHeight
                  });
        
        var actualWidth = div.offsetWidth;
        
        tp = {left: pos.left + pos.width / 2 - actualWidth / 2}            
        $(div).offset(tp);
        
        $(div).find(".tooltip-inner").text( ui.value );        
}
    
$("#slider").slider({ value: 15, slide: repositionTooltip, stop: repositionTooltip });
$("#slider .ui-slider-handle:first").tooltip( {title: $("#slider").slider("value"), trigger: "manual"}).tooltip("show");