Filter results between two custom number fields

Question

I have two custom fields. One is a start year and one is an end year. I need to filter my search results based on if the search query falls between that range. I have read the docs related to the range:field_name filter but can't seem to wrap my head around what I need to do?

e.g. If someone types 1998 into the year custom field, it MUST find an entry where the year falls between the custom_field_1 and custom_field_2 values.

I tried this as the field name but it errored out with the Disallowed Key Character message.

<input type="text" name="range:vehicleYearFrom|vehicleYearTo" id="years" placeholder="Year">

I hope this makes sense. :-)

Thanks for your help!

---

UPDATE: Everything works except when I try to combine the range and the search filters I get no results. If I use ONLY field search filters it works fine, and if I use ONLY the range filter, it works fine, but when I use both, I get no results. Any ideas why?

  {exp:low_search:form
    force_protocol="https"
    result_page="/get-started/%s"
  }
    {error_message}
    <div class="row">
      <div class="small-12 large-8 large-centered columns">
        <div id="your_vehicle">
          <h2>Your Vehicle</h2>
          <p><i>e.g. 2003 Buick Rendezvous</i></p>
          <div class="row">
            <div class="small-12 large-4 columns">
              <input type="text" name="range-from:vehicleYearFrom" id="yearsFrom" placeholder="Year">
              <input type="text" name="range-to:vehicleYearTo" id="yearsTo">
            </div>
            <div class="small-12 large-4 columns">
              <input type="text" name="search:vehicleMake" id="makes" placeholder="Make">
            </div>
            <div class="small-12 large-4 columns">
              <input type="text" name="search:vehicleModel" id="models" placeholder="Model">
            </div>
          </div>
          <br>
          <h5><a href="{path='money-back-warranty'}">100% Money Back Guarantee</a> - Free Shipping on Purchases of $30 or More</h5>
        </div>
      </div>
    </div>
    <button type="submit">Search</button>
  {/exp:low_search:form}

Answer 1

Having two channel fields for the range means you also need two input fields to filter. The name attribute of an input field always takes a single parameter. You're actually looking at two different ranges. To clarify:

• You have to fields; a FromYear field and ToYear field.
• You have one value you want to match against, so 2 ranges.
• For the first range you would want all matches where FromYear goes up to your number.
• For the second range, you would want all matches where ToYear starts at your number and up.

In an example, the Buick has FromYear 2002 and ToYear 2007. Enter year 2003.

• FromYear should be <= 2003.
• ToYear should be >= 2003.

In LS ranges, targeting these fields: range:FromYear="|2003" range:ToYear="2003|", or in the different syntax: range-to:FromYear="2003" range-from:ToYear="2003".

Changing that to input fields you can use in your form, you'd probably need something like this:

<input type="hidden" name="range-to:FromYear" class="year-range">
<input type="hidden" name="range-from:ToYear" class="year-range">
<input type="text" id="year" placeholder="Year">

And then use JavaScript to change the values of the year-range hidden input fields on form submit, for example.