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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(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();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: