Admin

RangeSlider

All code are beautifully written. You can customize easily. Just look the amex/rangeslider.html file go to form code with change and use.you would like to edit a specific section of the site, simply find the appropriate label in the and change what you need.If you change the "slider" find the following section in the amex/scss/pages/ui-range.scss file

amex bootstrap 4 admin dashboard provide this beautifull with standard rangeslider form you can see this documentation

<!doctype html>
    <!--  CSS    -->
    <link href="css/vendor/nouislider.min.css" rel="stylesheet"/>

<body>
    <div class="page-container">
      <div id="sidebar" class="sidebar-nav">
            <ul class="vertical-nav-menu metismenu in">
               < --------sidebar--------->
            </ul>
        </div> <  --/.sidebar----  >
        <div class="main-content">
            <div class="top-header">
                 <-----top header------>
            </div>  
            <div class="body-content">
                <div id="basic-slider">
                </div>
                <div class="snap">
                </div>
                <div id="hover">
                </div> 
                <div id="slider-step">
                </div
                <div id="drag-fixed">
                </div
                <div id="slider-format">
                </div
            </div>
        </div>
        <footer">
            <div class="footer-area">
                <-----footer content------>
            </div> 
        </footer>  
    </div>
</body>
<!--   Core JS Files   -->
<script src="js/vendor/ui-slider-init.js"></script>
<script src="js/vendor/wNumb.js"></script>
<script src="js/vendor/nouislider.min.js"></script>

</html>

<script>
    $(function() {
        $('#example, #exampletwo, #examplethree').barrating({
            theme: 'bars-reversed',
            hoverState:false,
        });
    });

    $(function() {
        $('#example2').barrating({
            theme: 'bars-pill',
            hoverState:false
        });
    });
    //Make sure that the dom is ready
    $(function () {

        $("#rateYo").rateYo({
            rating: 3.6
        });

    });
</script>