templates/extended-rangeslider.html.twig line 1

Open in your IDE?
  1. {{ include('partials/main.html.twig') }}
  3.     <head>
  4.         
  5.         {{ include('partials/title-meta.html.twig', {title: 'Range Slider'}) }}
  7.         <!-- nouisliderribute css -->
  8.         <link rel="stylesheet" href="/libs/nouislider/dist/nouislider.min.css">
  10.         {{ include('partials/head-css.html.twig') }}
  12.     </head>
  14.     {{ include('partials/body.html.twig') }}
  16.         <!-- Begin page -->
  17.         <div id="layout-wrapper">
  19.             {{ include('partials/menu.html.twig') }}
  21.             <!-- ============================================================== -->
  22.             <!-- Start right Content here -->
  23.             <!-- ============================================================== -->
  24.             <div class="main-content">
  26.                 <div class="page-content">
  27.                     <div class="container-fluid">
  29.                         {{ include('partials/page-title.html.twig', {pagetitle: 'Extended', title: 'Range Slider'}) }}
  31.                         <div class="row">
  32.                             <div class="col-lg-12">
  33.                                 <div class="card">
  34.                                     <div class="card-header">
  35.                                         <h5 class="card-title">noUiSlider</h5>
  36.                                         <p class="card-title-desc">noUiSlider is lightweight Javascript range slider</p>
  37.                                     </div>
  38.                                     <div class="card-body">
  39.                                         <div>
  40.                                             <div class="mb-5">
  41.                                                 <div class="row align-items-center">
  42.                                                     <div class="col-lg-3">
  43.                                                         <h5 class="font-size-14">Basic Example</h5>
  44.                                                     </div>
  45.                                                     <div class="col-lg-9">
  46.                                                         <div id="slider"></div>
  47.                                                     </div>
  48.                                                 </div>
  49.                                             </div>
  51.                                             <div class="mb-5">
  52.                                                 <div class="row">
  53.                                                     <div class="col-lg-3">
  54.                                                         <h5 class="font-size-14">Colorpicker</h5>
  55.                                                     </div>
  56.                                                     <div class="col-lg-9">
  57.                                                         <div class="sliders" id="red"></div>
  58.                                                         <div class="sliders" id="green"></div>
  59.                                                         <div class="sliders" id="blue"></div>
  60.                                             
  61.                                                         <div id="result"></div>
  62.                                                     </div>
  63.                                                 </div>
  64.                                             </div>
  66.                                             <div class="mb-5">
  67.                                                 <div class="row">
  68.                                                     <div class="col-lg-3">
  69.                                                         <h5 class="font-size-14">Using HTML5 input elements</h5>
  70.                                                     </div>
  71.                                                     <div class="col-lg-9">
  72.                                                         <div id="html5"></div>
  73.                                                         <div class="d-flex flex-wrap">
  74.                                                             <select id="input-select" class="form-select"></select>
  75.                                                             <input type="number" class="form-control" min="-20" max="40" step="1" id="input-number">
  76.                                                         </div>
  77.                                                     </div>
  78.                                                 </div>
  79.                                             </div>
  81.                                             <div class="mb-5">
  82.                                                 <div class="row">
  83.                                                     <div class="col-lg-3">
  84.                                                         <h5 class="font-size-14">Non linear slider</h5>
  85.                                                     </div>
  86.                                                     <div class="col-lg-9">
  87.                                                         <div id="nonlinear"></div>
  88.                                                         <span class="example-val" id="lower-value"></span>
  89.                                                         <span class="example-val" id="upper-value"></span>
  90.                                                     </div>
  91.                                                 </div>
  92.                                             </div>
  94.                                             <div class="mb-5">
  95.                                                 <div class="row">
  96.                                                     <div class="col-lg-3">
  97.                                                         <h5 class="font-size-14">Locking sliders together</h5>
  98.                                                     </div>
  99.                                                     <div class="col-lg-9">
  100.                                                         <div class="slider" id="slider1"></div>
  101.                                                         <span class="example-val mt-2" id="slider1-span"></span>
  102.             
  103.                                                         <div class="slider" id="slider2"></div>
  104.                                                         <span class="example-val mt-2" id="slider2-span"></span>
  105.             
  106.                                                         <button id="lockbutton" class="btn btn-primary" style="float: right; margin: 20px 0 0;">Lock</button>
  107.                                                     </div>
  108.                                                 </div>
  109.                                             </div>
  111.                                             <div class="mb-5">
  112.                                                 <div class="row">
  113.                                                     <div class="col-lg-3">
  114.                                                         <h5 class="font-size-14">Only showing tooltips when sliding handle</h5>
  115.                                                     </div>
  116.                                                     <div class="col-lg-9">
  117.                                                         <div class="slider" id="slider-hide"></div>
  118.                                                     </div>
  119.                                                 </div>
  120.                                             </div>
  122.                                             <div class="mb-5">
  123.                                                 <div class="row">
  124.                                                     <div class="col-lg-3">
  125.                                                         <h5 class="font-size-14">Colored Connect Elements</h5>
  126.                                                     </div>
  127.                                                     <div class="col-lg-9">
  128.                                                         <div class="slider" id="slider-color"></div>
  129.                                                     </div>
  130.                                                 </div>
  131.                                             </div>
  133.                                             <div class="mb-5">
  134.                                                 <div class="row">
  135.                                                     <div class="col-lg-3">
  136.                                                         <h5 class="font-size-14">Creating a toggle</h5>
  137.                                                     </div>
  138.                                                     <div class="col-lg-9">
  139.                                                         <div id="slider-toggle"></div>
  140.                                                     </div>
  141.                                                 </div>
  142.                                             </div>
  144.                                             <div class="mb-5">
  145.                                                 <div class="row">
  146.                                                     <div class="col-lg-3">
  147.                                                         <h5 class="font-size-14">Soft limits</h5>
  148.                                                     </div>
  149.                                                     <div class="col-lg-9">
  150.                                                         <div id="soft"></div>
  151.                                                     </div>
  152.                                                 </div>
  153.                                             </div>
  154.                                         </div>
  155.                                     </div>
  156.                                     <!-- end card body -->
  157.                                 </div>
  158.                                 <!-- end card -->
  159.                             </div>
  160.                             <!-- end col -->
  161.                         </div>
  162.                         <!-- end row -->
  163.                         
  164.                     </div> <!-- container-fluid -->
  165.                 </div>
  166.                 <!-- End Page-content -->
  168.                 
  169.                 {{ include('partials/footer.html.twig') }}
  170.             </div>
  171.             <!-- end main content-->
  173.         </div>
  174.         <!-- END layout-wrapper -->
  176.         {{ include('partials/right-sidebar.html.twig') }}
  178.         {{ include('partials/vendor-scripts.html.twig') }}
  180.         <!-- nouisliderribute js -->
  181.         <script src="/libs/nouislider/dist/nouislider.min.js"></script>
  182.         <script src="/libs/wnumb/wNumb.min.js"></script>
  184.         <!-- range slider init -->
  185.         <script src="/js/pages/rangeslider.init.js"></script>
  187.         <script src="/js/app.js"></script>
  189.     </body>
  190. </html>