<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<link rel="stylesheet" href="https://www.cssscript.com/demo/animated-customizable-range-slider-pure-javascript-rslider-js/css/rSlider.min.css">
<script src="https://www.cssscript.com/demo/animated-customizable-range-slider-pure-javascript-rslider-js/js/rSlider.min.js"></script>
<div class="container">
<div class="row">
</br></br>
<div >
<div class="slider-container">
<input type="text" id="slider3" class="slider" />
</div>
</div>
</div>
</div>
.rs-container *{
box-sizing:border-box;-webkit-touch-callout:none;
-webkit-user-select:none;-khtml-user-select:none;
-moz-user-select:none;-ms-user-select:none;user-select:none
}
.rs-container{
font-family:Arial,Helvetica,sans-serif;height:45px;position:relative
}
.rs-container .rs-bg,.rs-container .rs-selected{
background-color:#eee;border:1px solid #ededed;height:10px;left:0;position:absolute;top:5px;width:100%;border-radius:3px
}.rs-container .rs-selected{background-color:#00b3bc;border:1px solid #00969b;transition:all .2s linear;width:0}.rs-container.disabled .rs-selected{background-color:#ccc;border-color:#bbb}.rs-container .rs-pointer{background-color:#fff;border:1px solid #bbb;border-radius:4px;cursor:pointer;height:20px;left:-10px;position:absolute;top:0;transition:all .2s linear;width:30px;box-shadow:inset 0 0 1px #FFF,inset 0 1px 6px #ebebeb,1px 1px 4px rgba(0,0,0,.1)}.rs-container.disabled .rs-pointer{border-color:#ccc;cursor:default}.rs-container .rs-pointer::after,.rs-container .rs-pointer::before{content:'';position:absolute;width:1px;height:9px;background-color:#ddd;left:12px;top:5px}.rs-container .rs-pointer::after{left:auto;right:12px}.rs-container.sliding .rs-pointer,.rs-container.sliding .rs-selected{transition:none}.rs-container .rs-scale{left:0;position:absolute;top:5px;white-space:nowrap}.rs-container .rs-scale span{float:left;position:relative}.rs-container .rs-scale span::before{background-color:#ededed;content:"";height:8px;left:0;position:absolute;top:10px;width:1px}.rs-container.rs-noscale span::before{display:none}.rs-container.rs-noscale span:first-child::before,.rs-container.rs-noscale span:last-child::before{display:block}.rs-container .rs-scale span:last-child{margin-left:-1px;width:0}.rs-container .rs-scale span ins{color:#333;display:inline-block;font-size:12px;margin-top:20px;text-decoration:none}.rs-container.disabled .rs-scale span ins{color:#999}.rs-tooltip{color:#333;width:auto;min-width:60px;height:30px;background:#fff;border:1px solid #00969b;border-radius:3px;position:absolute;transform:translate(-50%,-35px);left:13px;text-align:center;font-size:13px;padding:6px 10px 0}.rs-container.disabled .rs-tooltip{border-color:#ccc;color:#999}
(function () {
'use strict';
var init = function () {
var slider2 = new rSlider({
target: '#slider2',
values: [0, 1, 2, 3, 4, 5, 6, '7', 8],
range: false,
set: [5],
tooltip: false,
onChange: function (vals) {
console.log(vals);
}
});
var slider3 = new rSlider({
target: '#slider3',
values: {min: 0, max: 255},
step: 10,
range: true,
set: [10, 40],
scale: true,
labels: true,
//set: null, // an array of preselected values
width: null,
// labels: true,
tooltip: true,
onChange: function (vals) {
console.log(vals);
}
});
var slider = new rSlider({
target: '#slider',
values: [2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015],
range: true,
set: [2010, 2013],
onChange: function (vals) {
console.log(vals);
}
});
};
window.onload = init;
})();
