Admin

Calendar

All code are beautifully written. You can customize easily. Just look the amex/calendar.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-widget.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 class="input-group date" id="datetimepicker1" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
                    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <div class="input-group-text"></div>
                    </div>
                </div>
                <div class="card-body">
                    <input type="text" class="form-control datetimepicker-input" id="datetimepicker5" data-toggle="datetimepicker" data-target="#datetimepicker5"/>
                </div>
                 <div id="datetimepicker13"></div>
            </div>
        </div>
        <footer">
            <div class="footer-area">
                <-----footer content------>
            </div> 
        </footer>  
    </div>
</body>
<!--   Core JS Files   -->
<script src="js/vendor/moment.js"></script>
<script src="js/vendor/tempusdominus-bootstrap-4.min.js"></script>

</html>

<script>
    $(function () {
        $('#datetimepicker1').datetimepicker();
        $('#datetimepicker3').datetimepicker({
            format: 'LT'
        });
        $('#datetimepicker4').datetimepicker({
            format: 'L'
        });
        $('#datetimepicker5').datetimepicker();
        $('#datetimepicker13').datetimepicker({
            inline: true,
            sideBySide: true
        });
    });
</script>