Bootstrap Snippet Bootstrap Sliders using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(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
            }
        });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Sliders"
Bootstrap 4.0.0 Snippet by CreativeTim

Related: See More

Questions / Comments:

"Bootstrap Sliders" Bootstrap 4.0.0 Snippet by CreativeTim

Related: See More

Questions / Comments:

"Bootstrap Sliders"
Bootstrap 4.0.0 Snippet by CreativeTim