nouislider added

js/tabler.js

@@ -118,6 +118,20 @@ $(document).ready(function() {
   // $('[data-toggle="tooltip"]').tooltip();
   // $('[data-toggle="popover"]').popover();
 
+/* NoUiSlider */
+
+if(window.noUiSlider){
+  let boi = document.getElementById("slider");
+  noUiSlider.create(boi,{
+    start: [20, 80],
+    connect: true,
+    range: {
+        'min': 0,
+        'max': 100
+    }
+  });
+}
+
   /*
   Autosize plugin
    */

package.json

@@ -111,6 +111,7 @@
     "imask": "5.2.1",
     "jquery": "3.4.1",
     "jqvmap": "1.5.1",
+    "nouislider": "14.1.0",
     "peity": "3.3.0",
     "selectize": "0.12.6"
   },

pages/_data/libs.json

@@ -18,7 +18,9 @@
     "@fullcalendar/daygrid/main.min.js",
     "@fullcalendar/interaction/main.min.js",
     "@fullcalendar/timegrid/main.min.js",
-    "@fullcalendar/list/main.min.js"
+    "@fullcalendar/list/main.min.js",
+
+    "nouislider/distribute/nouislider.min.js"
   ],
   "css": [
     "jqvmap/dist/jqvmap.min.css",
@@ -27,6 +29,8 @@
     "@fullcalendar/core/main.min.css",
     "@fullcalendar/daygrid/main.min.css",
     "@fullcalendar/timegrid/main.min.css",
-    "@fullcalendar/list/main.min.css"
+    "@fullcalendar/list/main.min.css",
+
+    "nouislider/distribute/nouislider.min.css"
   ]
 }

pages/tmp.html

@@ -30,4 +30,13 @@
       {% include cards/users-list.html offset=8 checkbox=true title="Contacts" %}
    </div>
 </div>
+<div class="row">
+   <div class="col-md-6">
+      <div class="card">
+         <div class="card-body">
+            <div id="slider"></div>
+         </div>
+      </div>
+   </div>
+</div>