<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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
}
});
});
