Bootstrap-slider click

by mark47

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://zshare.byethost31.com/bootstrap-slider/assets/js/bootstrap-slider.min.js"></script>
<link rel="stylesheet" href="http://zshare.byethost31.com/bootstrap-slider/assets/css/bootstrap-slider.min.css">
<div class="button-slider">
    <div class="btn-group">
        <div class="btn btn-default">Temperature</div>
        <div class="btn btn-default">
            <input id="bootstrap-slider" type="text" data-precision="2" data-slider-min="95" data-slider-max="105" data-slider-step="0.1" data-slider-value="98.6"/>
            <div class="valueLabel"><span id="sliderValue">98</span>&deg;</div>
        </div>
    </div>
</div>

CSS

body {
	margin: 30px;
}

.slider {
	display: block;
	float: left;
	margin-left: 5px;
}

.valueLabel {
	display: block;
	float: left;
	margin-left: 15px;
}

JavaScript

$("#bootstrap-slider").slider();
$("#bootstrap-slider").on("slide", function(slideEvt) {
    $("#sliderValue").text(slideEvt.value);
});

$('.slider').on("slideStop", function() {
    var newvalue = $('.tooltip-inner').text();
    $("#sliderValue").text(newvalue);
});