old-web/app/views/standardFilters.ejs

<br />

<div class="row center-align">
  <h5>Cijena (KM)</h5>
  <br /><br />
  <div class="col s12">
    <div class="center-align no-ui-slider" id="priceFilter"></div>
  </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 (m<sup>2</sup>)</h5>
  <br /><br />
  <div class="col s12">
    <div class="center-align no-ui-slider" id="sizeFilter"></div>
  </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 (m<sup>2</sup>)</h5>
  <br /><br />
  <div class="col s12">
    <div class="center-align no-ui-slider" id="gardenSizeFilter"></div>
  </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>
<% } %>

<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(function() {
      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>