I have a few questions around customising the range slider’s filter behaviour and UI appearances. I have a few goals for these, so I’ll try list them out clearly:
———
Only filter when the user interacts with a range slider
I’m wondering if there’s a way of stopping range sliders from filtering the page by default on page load? I am using a few range sliders on a relatively complex filter system and on page load, I’m getting results from the range sliders min/max values when I would rather the filters are inactive until the user interacts with them and sets some parameters.
I can achieve what I want by clearing the filter / all filters, but this isn’t really a practicable solution to expect the user to do, and if I were to have this done programatically on page load, any pre-filtered pages using query parameters would break.
———
Override the min/max without affecting the UI
I am getting the request from our client to make the price filter for houses to be from $600k to $2.5M+, but they have listings lower than $600k and higher than $2.5M. So I was wondering if it was possible for the inputs received a different number whenever the handles were either on the min/max positions.
For example; the UI shows the min of $600k, but the filter input receives $200k, as soon as the user moves the handle up to the next $100k increment, the filter receives $700k as it usually would. Similarly for the max end; the UI shows $2.5M+, but the filter input receives a huge number like $999M to catch all of their more expensive listings. Then when the user pulls the handle down to $2.4M, the input receives that value as expected.
Oh and a wee side note, the + to conditionally show whenever the handle is at the max would definitely keep the client happy and the UX on point!
———
Custom number formatting
As you saw in the previous query, we’re dealing with fairly large numbers, so having these written out as $2,500,000 is quite restrictive in terms of space in the UI, especially at narrower viewports. Would it be possible to override the standard number formatting with commas (or not use it and have a custom solution) that changes all numbers in the hundreds of thousands to abbreviate to $200k / $400k / $600k etc., and all numbers in the millions to abbreviate to $2M / $2.5M and so on.
———
Syncing values between two instances of the same range slider filter
I have designed a UI that utilises a sticky top bar on desktop with the key filters for homes like; Location (not a range slider), Price, Bedrooms, and Bathrooms. I then have a button that opens up a full height drawer with the full list of filters, which include the same as above, plus other more granular filters.
My goal is to have the two instances of the price filter in sync, same with bedrooms and bathrooms. I am thinking that my drilldown menu of regions, subregions and suburbs in the location filter (a whole menu structure of radio buttons) will be a whole other kettle of fish, and I’m thinking about some custom JS that stores the values in localStorage and programatically keeps these two in sync. But, I’m keen to know what you guys think about keeping duplicates of range sliders in sync.
———
Help on any of these goals would be hugely appreciated, I’m not sure a project link would be that useful to you guys on these questions, as they’re less about fixing something specific, and more about customisation in general.
Anyway, really loving the work you guys have been doing, the update to Attributes v2 is great… really awesome work guys 
those new instruction docs pages are 
looking forward to the updated complex filter system example and video for v2, if that’s in the pipeline 
a sincere thank you for all your hard work!