JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="content"><div id="slider"></div></div>

CSS

body {
    padding: 100px;
}

JavaScript

var init_start_at = 20;
var init_end_at = 25;
$('#slider').slider({
    range: true,
    min: -60,
    max: 60,
    values: [ init_start_at, init_end_at ],
    slide: function(event, ui) {
        // Allow time for exact positioning
        setTimeout( function(){
            $(ui.handle).attr('title', ui.value + '°C').tooltip('fixTitle').tooltip('show');
        }, 5);
    },
    create: function( event, ui ) {
        var target = $(event.target);
        var handles = $(event.target).find('a');
        var container, wait;
        
        // Wait for the slider to be in position
        (wait = function() {
            if ((container = target.parents('.content')).length != 0) {
                handles.eq(0).tooltip({animation: false, placement: 'top',trigger: 'manual', container: container, title: init_start_at + ' °C'}).tooltip('show');
                handles.eq(1).tooltip({animation: false, placement: 'bottom',trigger: 'manual', container: container, title: init_end_at + ' °C'}).tooltip('show');
            } else {
                setTimeout( wait, 50 );
            }
        })();
    }
});