<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="slider-wrapper"> <h3><span class="label label-default">Number</span></h3> <div class="col-sm-12"> <div id="slider"></div> </div> </div> </div> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

body {padding: 50px;} .ui-widget-content {border: 1px solid #777777;} .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 5em; height: 2em; cursor: default; margin: 0 -40px auto !important; text-align: center; line-height: 30px; color: #ffffff; font-size: 15px; } .ui-slider .ui-slider-handle .glyphicon {color: #ffffff;font-size: 11px;} .ui-corner-all {border-radius: 20px;} .ui-slider-horizontal .ui-slider-handle {top: -.9em;margin-left: -0.5em;} .ui-state-default, .ui-widget-content .ui-state-default {background: #777777;} .ui-slider a, .ui-slider a:focus {cursor: pointer;outline: none;} h3 {margin: 0 0 25px -60px}

$(document).ready(function() { $("#slider").slider( { animate: true, value:1, min: 1, max: 10, step: 1, slide: function(event, ui) { update(1,ui.value); //changed } }); update(); }); //changed. now with parameter function update(slider,val) { //changed. Now, directly take value from ui.value. if not set (initial, will use current value.) var $amount = slider == 1?val:$("#amount").val(); $('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>'); }