old-web/app/views/realEstateFilters.ejs

<form id="filtersForm" method="POST">
  <br>

  <div class="row center-align">
    <h5>Cijena</h5>
    <br><br>
    <div class="center-align no-ui-slider" id="priceFilter"></div>
  </div>

  <br>
  <div class="row">
    <div class="col s5 m3 l3 push-m1 push-l2">
      <input class="sliderInputBox" type="number" id="priceMin" name="priceMin">

    </div>
    <div class="col s5 m3 l3 push-s1 push-m4 push-l4">
      <input class="sliderInputBox" type="number" id="priceMax" name="priceMax">
    </div>
  </div>

  <br>

  <div class="row center-align">
    <h5>Površina</h5>
    <br><br>
    <div class="center-align no-ui-slider" id="sizeFilter"></div>
  </div>

  <br>
  <div class="row">
    <div class="col s5 m3 l3 push-m1 push-l2">
      <input class="sliderInputBox" type="number" id="sizeMin" name="sizeMin">

    </div>
    <div class="col s5 m3 l3 push-s1 push-m4 push-l4">
      <input class="sliderInputBox" type="number" id="sizeMax" name="sizeMax">
    </div>
  </div>

  <br>

  <% if(hasGardenSize) { %>
    <div class="row center-align">
      <h5>Površina okućnice</h5>
      <br><br>
      <div class="center-align no-ui-slider" id="gardenSizeFilter"></div>
    </div>

    <br>
    <div class="row">
      <div class="col s5 m3 l3 push-m1 push-l2">
        <input class="sliderInputBox" type="number" id="gardenSizeMin" name="gardenSizeMin">

      </div>
      <div class="col s5 m3 l3 push-s1 push-m4 push-l4">
        <input class="sliderInputBox" type="number" id="gardenSizeMax" name="gardenSizeMax">
      </div>
    </div>
  <% } %>

  <div class="row">
    <div class="col s6 push-s3">
      <a id="submit" href="#" class="welcome-center-button waves-effect waves-light btn">Dalje</a>
    </div>
  </div>
</form>

<script>
  $(document).ready(function() {
    const priceSliderOptions = {...<%- priceSliderOptions %>};
    const sizeSliderOptions = {...<%- sizeSliderOptions %>};
    const priceStep = priceSliderOptions.step;
    const sizeStep = sizeSliderOptions.step;
    delete priceSliderOptions.step;
    delete sizeSliderOptions.step;

    function updatePriceInputs(values, handle, unencoded) {
      $("#priceMin").val(Math.round(unencoded[0]/priceStep)*priceStep);
      $("#priceMax").val(Math.round(unencoded[1]/priceStep)*priceStep);
    }
    function updateSizeInputs(values, handle, unencoded) {
      $("#sizeMin").val(Math.round(unencoded[0]/sizeStep)*sizeStep);
      $("#sizeMax").val(Math.round(unencoded[1]/sizeStep)*sizeStep);
    }

    const priceSlider = document.getElementById("priceFilter");
    const sizeSlider = document.getElementById("sizeFilter");

    const priceSliderObject = noUiSlider.create(priceSlider, priceSliderOptions);
    const sizeSliderObject = noUiSlider.create(sizeSlider, sizeSliderOptions);

    priceSliderObject.on('slide', updatePriceInputs);
    sizeSliderObject.on('slide', updateSizeInputs);

    function priceMinChangeHandler(element) {
      if (element && element.currentTarget && element.currentTarget.value){
        const currentValues = priceSliderObject.get();
        const newValue = element.currentTarget.value;
        const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
        priceSliderObject.set([fixedNewValue, null]);
        $("#priceMin").val(Math.round(priceSliderObject.get()[0]));
      }
    }
    function priceMaxChangeHandler(element) {
      if (element && element.currentTarget && element.currentTarget.value){
        const newValue = element.currentTarget.value;
        priceSliderObject.set([null, newValue]);
        $("#priceMax").val(Math.round(priceSliderObject.get()[1]));
      }
    }
    $("#priceMin").val(priceSliderOptions.start[0]);
    $("#priceMax").val(priceSliderOptions.start[1]);
    $("#priceMin").change(priceMinChangeHandler);
    $("#priceMax").change(priceMaxChangeHandler);

    function sizeMinChangeHandler(element) {
      if (element && element.currentTarget && element.currentTarget.value){
        const currentValues = sizeSliderObject.get();
        const newValue = element.currentTarget.value;
        const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
        sizeSliderObject.set([fixedNewValue, null]);
        $("#sizeMin").val(Math.round(sizeSliderObject.get()[0]));
      }
    }
    function sizeMaxChangeHandler(element) {
      if (element && element.currentTarget && element.currentTarget.value){
        const newValue = element.currentTarget.value;
        sizeSliderObject.set([null, newValue]);
        $("#sizeMax").val(Math.round(sizeSliderObject.get()[1]));
      }
    }
    $("#sizeMin").val(sizeSliderOptions.start[0]);
    $("#sizeMax").val(sizeSliderOptions.start[1]);
    $("#sizeMin").change(sizeMinChangeHandler);
    $("#sizeMax").change(sizeMaxChangeHandler);

    <% if(hasGardenSize) { %>
    const gardenSizeSliderOptions = {...<%- gardenSizeSliderOptions %>};
    const gardenSizeStep = gardenSizeSliderOptions.step;
    delete gardenSizeSliderOptions.step;

    function updateGardenSizeInputs(values, handle, unencoded) {
      $("#gardenSizeMin").val(Math.round(unencoded[0]/gardenSizeStep)*gardenSizeStep);
      $("#gardenSizeMax").val(Math.round(unencoded[1]/gardenSizeStep)*gardenSizeStep);
    }

    const gardenSizeSlider = document.getElementById("gardenSizeFilter");
    const gardenSizeSliderObject = noUiSlider.create(gardenSizeSlider, gardenSizeSliderOptions);
    gardenSizeSliderObject.on('slide', updateGardenSizeInputs);
    function gardenSizeMinChangeHandler(element) {
      if (element && element.currentTarget && element.currentTarget.value){
        const currentValues = gardenSizeSliderObject.get();
        const newValue = element.currentTarget.value;
        const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
        gardenSizeSliderObject.set([fixedNewValue, null]);
        $("#gardenSizeMin").val(Math.round(gardenSizeSliderObject.get()[0]));
      }
    }
    function gardenSizeMaxChangeHandler(element) {
      if (element && element.currentTarget && element.currentTarget.value){
        const newValue = element.currentTarget.value;
        gardenSizeSliderObject.set([null, newValue]);
        $("#gardenSizeMin").val(Math.round(gardenSizeSliderObject.get()[0]));
      }
    }
    $("#gardenSizeMin").val(gardenSizeSliderOptions.start[0]);
    $("#gardenSizeMax").val(gardenSizeSliderOptions.start[1]);
    $("#gardenSizeMin").change("step", gardenSizeMinChangeHandler);
    $("#gardenSizeMax").change("step", gardenSizeMaxChangeHandler);
    <% } %>

    $("#submit").click(() => {
      const priceFilterValues = priceSlider.noUiSlider.get();
      $("#priceFilterMin").val(priceFilterValues[0]);
      $("#priceFilterMax").val(priceFilterValues[1]);

      const sizeFilterValues = sizeSlider.noUiSlider.get();
      $("#sizeFilterMin").val(sizeFilterValues[0]);
      $("#sizeFilterMax").val(sizeFilterValues[1]);

      <% if (hasGardenSize) { %>
        const gardenSizeFilterValues = gardenSizeSlider.noUiSlider.get();
        $("#gardenSizeFilterMin").val(gardenSizeFilterValues[0]);
        $("#gardenSizeFilterMax").val(gardenSizeFilterValues[1]);
      <% } %>

      $("#filtersForm").submit();
    });
  });
</script>