"Range Slider(js)"
Bootstrap 3.3.0 Snippet by imsachin

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><!--for range slider css--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="container"> <p> <label for="amount">Price range:</label> <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range"></div> </div> <script src="js/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><!--for range slider js--> <script src="js/bootstrap.min.js"></script> </body> </html>
/*new slider*/ #time-range p { font-family:"Arial", sans-serif; font-size:14px; color:#333; } .ui-slider-horizontal { height: 8px; background: #D7D7D7; border: 1px solid #BABABA; box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset; clear: both; margin: 8px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .ui-slider { position: relative; text-align: left; } .ui-slider-horizontal .ui-slider-range { top: -1px; height: 100%; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; height: 8px; font-size: .7em; display: block; border: 1px solid #5BA8E1; box-shadow: 0 1px 0 #AAD6F6 inset; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; background: #81B8F3; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #A0D4F5), color-stop(100%, #81B8F3)); background-image: -webkit-linear-gradient(top, #A0D4F5, #81B8F3); background-image: -moz-linear-gradient(top, #A0D4F5, #81B8F3); background-image: -o-linear-gradient(top, #A0D4F5, #81B8F3); background-image: linear-gradient(top, #A0D4F5, #81B8F3); } .ui-slider .ui-slider-handle { border-radius: 50%; background: #F9FBFA; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #C7CED6), color-stop(100%, #F9FBFA)); background-image: -webkit-linear-gradient(top, #C7CED6, #F9FBFA); background-image: -moz-linear-gradient(top, #C7CED6, #F9FBFA); background-image: -o-linear-gradient(top, #C7CED6, #F9FBFA); background-image: linear-gradient(top, #C7CED6, #F9FBFA); width: 22px; height: 22px; -webkit-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset; -moz-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset; box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset; -webkit-transition: box-shadow .3s; -moz-transition: box-shadow .3s; -o-transition: box-shadow .3s; transition: box-shadow .3s; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 22px; height: 22px; cursor: default; border: none; cursor: pointer; } .ui-slider .ui-slider-handle:after { content:""; position: absolute; width: 8px; height: 8px; border-radius: 50%; top: 50%; margin-top: -4px; left: 50%; margin-left: -4px; background: #30A2D2; -webkit-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF; -moz-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 white; box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF; } .ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.6em; } .ui-slider a:focus { outline:none; } #slider-range { width: 90%; margin: 0 auto; } #time-range { width: 400px; }
$( function() { $( "#slider-range" ).slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); } );

Related: See More


Questions / Comments: