app/views/partials/range.ejs

@@ -15,7 +15,7 @@
       <h6>Do</h6>
     </div>
     <div class="row center-align">
-      <h6 id="to-value"><%= rangeTo.value %>  <%= unit %></h12>
+      <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 %>"
@@ -34,11 +34,19 @@
   $(document).ready(() => {
 
     $("#from").change(function () {
+      if (Number($("#from").val()) >= Number($("#to").val())) {
+        $("#from").val(Number($("#to").val()) - Number(<%= rangeFrom.step %>)  )
+      }
+
       $('#from-value').text($("#from").val() + "<%= unit %>");
     });
 
     $("#to").change(function () {
-      $('#to-value').text($("#to").val() + "<%= unit %>" );
+
+      if (Number($("#to").val()) <= Number($("#from").val())) {
+        $("#to").val(Number($("#from").val()) + Number(<%= rangeTo.step %>)  )
+      }
+      $('#to-value').text($("#to").val() + "<%= unit %>");
     });
 
 
@@ -57,5 +65,7 @@
 
       $("#form-range").submit();
     });
+
   });
+
 </script>