"Bootstrap Sliders"
Bootstrap 4.0.0 Snippet by jochemstoel

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.0.0/nouislider.css" rel="stylesheet"> <body> <div class="container mt-5"> <div class="title"> <h3>Sliders</h3> </div> <div id="sliderRegular" class="slider"></div> <div id="sliderDouble" class="slider slider-info"></div> <!-- change the color of the sliders using 'slider-info', 'slider-success', 'slider-warning' and 'slider-danger' classes --> </div> <footer class="footer text-center "> <p>Made with <a href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit</a> by Creative Tim</p> </footer> <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.0.0/nouislider.js"></script> </body>
html *{ -webkit-font-smoothing: antialiased; } .title h3{ font-size: 25px !important; margin-top: 20px; margin-bottom: 25px; line-height: 1.4em !important; font-weight: 300; } .container .noUi-horizontal { height: 2px !important; margin: 15px 0; } .container .noUi-origin { position: absolute; width: 0; margin: 0; border-radius: 0; height: 2px; background: #c8c8c8; } .container .noUi-horizontal .noUi-handle { position: relative; z-index: 1; box-sizing: border-box; width: 14px; height: 14px; left: -10px; top: -6px; cursor: pointer; border-radius: 100%; transition: all .2s ease-out; border: 1px solid; background: #fff; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2); } .container .slider .noUi-connect { background-color: #9c27b0; border-radius: 4px; } .container .slider .noUi-handle { border-color: #9c27b0; } .container .noUi-base{ height: 2px; top: -1px; } .container .noUi-handle:before,.container .noUi-handle:after{ content: none; } .slider.slider-info .noUi-connect { background-color: #00bcd4; } .slider.slider-info .noUi-handle { border-color: #00bcd4; } .slider.slider-success .noUi-connect { background-color: #4caf50; } .slider.slider-success .noUi-handle { border-color: #4caf50; } .slider.slider-danger .noUi-connect { background-color: #f44336; } .slider.slider-danger .noUi-handle { border-color: #f44336; } .slider.slider-warning .noUi-connect { background-color: #ff9800; } .slider.slider-warning .noUi-handle { border-color: #ff9800; } .noUi-handle.noUi-active { transform: scale3d(1.5,1.5,1); } .noUi-handle:focus{ outline: none; } /* footer */ footer{ margin-top: 50px; color: #555; background: #fbfafa; padding: 25px; font-weight: 300; } .footer p{ margin-bottom: 0; font-size: 14px; font-weight: 300; } footer p a{ color: #555; font-weight: 400; } footer p a:hover { color: #9f26aa; text-decoration: none; }
$(document).ready(function() { $('body').bootstrapMaterialDesign(); var slider = document.getElementById('sliderRegular'); noUiSlider.create(slider, { start: 40, connect: [true, false], range: { min: 0, max: 100 } }); var slider2 = document.getElementById('sliderDouble'); noUiSlider.create(slider2, { start: [20, 60], connect: true, range: { min: 0, max: 100 } }); });

Related: See More


Questions / Comments: