From efda7fdccdc35eac9deedd8d27b4ae1e44c77d89 Mon Sep 17 00:00:00 2001
From: Nedim Uka <nedim@saburly.com>
Date: Wed, 12 Jun 2019 13:32:28 +0200
Subject: [PATCH] Added nouiRange slider

---
 app/views/layout.ejs         |  5 +++
 app/views/partials/range.ejs | 78 +++++++++++++-----------------------
 2 files changed, 32 insertions(+), 51 deletions(-)
diff --git a/app/views/layout.ejs b/app/views/layout.ejs
index dd920d3..9f44505 100644
--- a/app/views/layout.ejs
+++ b/app/views/layout.ejs
@@ -3,6 +3,7 @@
   <head>
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.5/nouislider.min.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
       <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
     <meta charset="UTF-8" />
@@ -13,5 +14,9 @@
       <%-body%>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.5/nouislider.min.js"></script> 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script> 
+    
+    
   </body>
 </html>
diff --git a/app/views/partials/range.ejs b/app/views/partials/range.ejs
index 46623ef..889c293 100644
--- a/app/views/partials/range.ejs
+++ b/app/views/partials/range.ejs
@@ -1,77 +1,53 @@
 <form method="POST" id="form-range">
 
-  <div>
-    <div class="row center-align">
-      <h6>Od</h6>
-    </div>
-    <div class="row center-align">
-      <h6 id="from-value"><%= rangeFrom.value %> <%= unit %> </h12>
-    </div>
-    <p class="range-field">
-      <input name="from" id="from" type="range" value="<%= rangeFrom.value %>" min="<%= rangeFrom.min %>"
-        max="<%= rangeFrom.max %>" step="<%= rangeFrom.step %>" />
-    </p>
-    <div class="row center-align">
-      <h6>Do</h6>
-    </div>
-    <div class="row center-align">
-      <h6 id="to-value"><%= rangeTo.value %> <%= unit %></h12>
-    </div>
-    <p class="range-field">
-      <input name="to" id="to" type="range" value="<%= rangeTo.value %>" min="<%= rangeTo.min %>"
-        max="<%= rangeTo.max %>" step="<%= rangeTo.step %>" />
-    </p>
-  </div>
+  <div class="row center-align" id="slider"></div>
+
   <div class="col s6 push-s3">
     <a id="btnsubmit" href="#" class="welcome-center-button waves-effect waves-light btn">
       Dalje
     </a>
   </div>
+
+  <input type="hidden" name="from" id="from" />
+  <input type="hidden" name="to" id="to" />
 </form>
 
 <script>
 
   $(document).ready(() => {
 
-    $("#from").change(function () {
-      if (Number($("#from").val()) >= Number($("#to").val())) {
-        $("#from").val(Number($("#to").val()) - Number(<%= rangeFrom.step %>)  )
-        $("#from").next().css({"height": "0px"});
-      } else {
-        $("#from").next().css({"height": "30px"});
-      }
+    var slider = document.getElementById('slider');
 
-      $('#from-value').text($("#from").val() + "<%= unit %>");
-    });
+    const unitFormat = wNumb({
+        decimals: 3,
+        thousand: '.',
+        suffix: '<%= unit %>'
+      })
 
-    $("#to").change(function () {
 
-      if (Number($("#to").val()) <= Number($("#from").val())) {
-        $("#to").val(Number($("#from").val()) + Number(<%= rangeTo.step %>)  )
-        $("#to").next().css({"height": "0px"});
-      } else {
-        $("#to").next().css({"height": "30px"});
-      }
-      $('#to-value').text($("#to").val() + "<%= unit %>");
+    noUiSlider.create(slider, {
+      start: [<%= rangeFrom.value %>, <%= rangeTo.value %>],
+      connect: true,
+      tooltips: true,
+      step: <%= rangeFrom.step %>,
+      range: {
+        'min': <%= rangeFrom.min %>,
+        'max': <%= rangeTo.max %>
+    },
+      format: unitFormat
     });
 
 
     $("#btnsubmit").click(() => {
-      var from = $("#from").val();
-      var to = $("#to").val();
-
-      $("#foo").on("click", function () {
-        alert($(this).text());
-      });
-
-      if (parseInt(from, 10) >= parseInt(to, 10)) {
-        alert("\"Od\" vrijednost ne smije biti veca od \"Do\" vrijednosti ")
-        return;
-      }
+      const sliderValues = slider.noUiSlider.get();
+      
+      $("#from").val(unitFormat.from(sliderValues[0]));
+      $("#to").val(unitFormat.from(sliderValues[1]));
 
       $("#form-range").submit();
-    });
+      // });
 
+    });
   });
 
 </script>
\ No newline at end of file
