Filter widgets
The fourteen filter atoms — what each one filters, the input types available, and the conventions they all share.
Each filter is its own widget, so you place them where your design needs them rather than accepting a fixed sidebar. They all talk to the Diamond Loop on the page automatically — there is nothing to connect.
Shared conventions
Before the individual widgets, four things they all do:
- Skin — the same five looks. Give every filter on a page the same one.
- Title — shown or hidden, and styled by the skin unless you override it.
- Multi-select switch — on options-style filters, choose whether the shopper can pick several values or only one. The default matches the data: several shapes make sense, one origin usually does not.
- Info icon — an optional help bubble with your own text, for filters your customers need explaining. Clarity is the usual candidate.
The filters
Shape
The signature filter. Icon tiles for each shape, with the option to show names, cap how many appear before a "More" dropdown, and scroll them in one row or wrap onto several. Uses NivoSync's own shape icons.
Carat and Price
Numeric ranges, drawn either as a dual-handle slider or as min/max dropdowns.
You define the steps yourself as a comma-separated list, so the scale can be non-linear where your inventory is — tight steps at 0.30–1.50, wider above. The last step can be treated as "and over", showing +7.00 or +£50,000 and applying no upper limit.
The slider shows a summary line (Selected range: 0.50 – 2.00) and optional ticks that either sit under the bar or cross it.
Price reads the store's currency and works in whole units, not cents.
Grade
One widget, six datasets — chosen with the Attribute control:
Colour · Clarity · Cut · Polish · Symmetry · Fluorescence
Drawn as buttons or as a categorical dual-handle slider. The slider suits ordered scales (D to M, IF to I2) because dragging a range is more natural than ticking eight boxes; buttons suit short lists.
Certificate
The grading labs — GIA, IGI, GCAL and whatever else your feed carries. Renders the lab logos where NivoSync has them and falls back to the name otherwise.
Origin
Natural against lab-grown. By default picking one deselects the other, since a diamond is one or the other; Allow both at once turns it into a multi-select that shows everything.
Advanced Range
Like Carat and Price, for the technical fields: table, depth, ratio, length and width. Pick the field with the Field control.
Media
Filters by what the stone has: with photo, with video, with 360° view.
Search
Free text over shape and certificate number. Search as you type or on Enter only.
Sort, Per Page, Results Count, Applied Filters
The toolbar atoms, available separately so you can place them where you want:
- Sort — price, carat, colour and clarity, ascending or descending.
- Per Page — how many diamonds per page.
- Results Count — the total, with a
{total}placeholder in your own wording. - Applied Filters — chips for everything currently active, each removable, plus a Clear all.
Composite or atoms?
If you want all your filters in one block with a repeater to order them, use the Diamond Filters widget instead — see Diamond Filters composite.
Use the atoms when the filters need to live in different parts of your layout: shapes across the top, the rest in a sidebar, sort in the toolbar.