<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();
});
