"rSlider.js: Range Slider"
Bootstrap 3.2.0 Snippet by KrishnaPraveenVemuri

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

Related: See More


Questions / Comments: