Skip to main content

Finsweet range slider

WF-Algolia provides the range filter but no slider UI — Webflow has no native one, and Finsweet's is already in many projects. They connect through inputs.

How they meet​

A range filter reads its bounds from two inputs marked and .

Finsweet's slider writes its handle positions into inputs.

Point the slider at the same two inputs the filter is watching, and dragging a handle updates the filter. Neither library knows about the other; the inputs are the contract.

<div wf-algolia-element="filter-group" wf-algolia-field="price" wf-algolia-type="range">
  <input wf-algolia-element="range-min" />
  <input wf-algolia-element="range-max" />
</div>

Order of loading​

Both scripts are independent. If the slider initialises before the filter has rendered, re-bind it after results arrive:

WfAlgolia.on('results', () => {
  /* re-init the slider here */
});

Gotchas​

  • The field must be numeric in Algolia. A price stored as "49.99" never matches, no matter how the slider is configured.
  • Do not duplicate the inputs. One pair, read by both libraries. A second hidden pair is the usual cause of a slider that moves but does not filter.