Live Demo

Below is a real Filter instance mounted on this page. Toggle the controls, then click Apply to push the current selection to the URL — that's the only step that updates location.search. Reset clears both the form and the URL params. Back / Forward rewinds through the committed states.

Markup

<form data-filter-form="live-demo">
  <input type="checkbox" value="checkbox-1" data-filter="checkbox" />
  <!-- … five checkboxes share the same data-filter="checkbox" -->

  <input type="radio" name="demo-radio" value="radio-1" data-filter="radio" />
  <!-- … five radios -->

  <select data-filter="select-1">
    <option value="">—</option>
    <option value="option-1-1">option-1-1</option>
    <!-- … -->
  </select>

  <select data-filter="select-multiple" multiple>
    <option value="option-1">option-1</option>
    <!-- … -->
  </select>

  <input type="color" data-filter="color" />
  <input type="range" data-filter="range" min="0" max="100" step="10" />
  <input type="date" data-filter="date" />
  <input type="month" data-filter="month" />
  <input type="week" data-filter="week" />
  <input type="time" data-filter="time" />

  <button type="reset">Reset</button>
  <button type="button">Apply</button>
</form>

Setup

import Filter from '@kassaila/filter-dom-url';

const filter = new Filter({
  formAttr: 'data-filter-form="live-demo"',
  filterAttr: 'data-filter',
});

filter.init();

That's the entire wiring. See Reset & Apply for the optional Apply/Reset button patterns shown above.