"Bootstrap Pricing Slider Fully Touch Compatible"
Bootstrap 3.3.0 Snippet by streamvest

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="row text-center"> <h2>Bootstrap Pricing Slider Fully Touch Compatible</h2> <hr> <span class="h1" id="amount-label"> <span class="pricing__dollar">€</span> </span> <br/> <br/> <br/> <br/> <div class="row"> <div class="col-xs-10 col-xs-offset-1"> <!-- As seen here https://bootsnipp.com/snippets/featured/bootstrap-pricing-slider-donations --> <input id="range-slider" type="range" min="0" max="100" step="10" value="0"> </div> </div> </div> </div> <!-- http://rangeslider.js.org/ --> <script src="https://cdn.jsdelivr.net/rangeslider.js/2.3.0/rangeslider.min.js"></script>
/* Price slider */ .rangeslider, .rangeslider__fill { display: block; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .rangeslider { background: #e6e6e6; position: relative; } .rangeslider--horizontal { height: 1px; width: 100%; } .rangeslider--disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .rangeslider__fill { background: #de2d40; position: absolute; } .rangeslider--horizontal .rangeslider__fill { top: 0; height: 100%; } .rangeslider__handle { background: #de2d40; color: #FFFFFF; cursor: pointer; display: inline-block; width: 5.2em; height: 2.2em; position: absolute; -moz-border-radius: 22px; -webkit-border-radius: 22px; border-radius: 22px; line-height: 2.2em; text-align: center; } .rangeslider__handle:before { font-family: 'Glyphicons Halflings'; content: "\e079"; font-size: 11px; opacity: 0.5; margin: 0 3px; color: #fff; display: block; position: absolute; top: 0; left: 5px; bottom: 0; } .rangeslider__handle:after { font-family: 'Glyphicons Halflings'; content: "\e080"; font-size: 11px; opacity: 0.5; margin: 0 3px; color: #fff; display: block; position: absolute; top: 0; right: 5px; bottom: 0; } .rangeslider--horizontal .rangeslider__handle { top: -15px; touch-action: pan-y; -ms-touch-action: pan-y; } input[type="range"]:focus + .rangeslider .rangeslider__handle { -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); }
$(document).ready(function() { var $element = $('input[type="range"]'); var $handle; $element.rangeslider({ polyfill: false, onInit: function() { $handle = $('.rangeslider__handle', this.$range); updateHandle($handle[0], this.value); $("#amount-label").html('<span class="pricing__dollar">€</span>' + this.value); } }).on('input', function() { updateHandle($handle[0], this.value); $("#amount-label").html('<span class="pricing__dollar">€</span>' + this.value); }); function updateHandle(el, val) { el.textContent = val; } $('input[type="range"]').rangeslider(); });

Related: See More


Questions / Comments: