JSFiddle - React, Tailwind, and code Playground

by Tony Realovich

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<div class="demo">

<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" readonly />
</p>

<div id="slider-range"></div>

</div><!-- End demo -->

CSS

.demo {
    margin:50px;
}

.slider-tip {
    opacity:1;
    bottom:120%;
    margin-left: -0.4em;
}

#slider-range {
    margin-top: 20px;
}

.ui-slider-handle {
    outline: none;
}

.tooltip-inner {
    position: absolute;
    top: 20px;
}

JavaScript

$("#slider-range").slider({
    range: true,
    step: 5,
    min: 100,
    max: 500,
    values: [150, 300],
    slide: function(event, ui) {
        $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

        $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>');
        $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>');
    }
});

$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));