Hello,
I'm trying to add a custom slider component in react for search filtering but I'm having some trouble.
If I just set the min and max of my slider filter at the start, then it works fine. But then that means that if other filters are changed, then the absolute min and max of the slider just stay the same.
And I'm running into problems when trying to update the absolute min and max of a slider filter when the other filters are changed.
Take for example the national parks example, and say I want to make a slider filter for the visitors. If I were to update the absolute min and max of the visitor slider on every filter change, then when someone would go to change for example the max amount of visitors with the slider, then the absolute max of the slider would just permanently be lower and could not be raised without clearing all filters. This is undesirable because you should be able to undo the action you just made with a filter, just like with checking or unchecking a box.
Another thing I thought of, was just updating the slider absolute min and max values only if other filters change and not the slider filter. That only kind of works. It works when adding on filters, but when a slider filter is set, then you can't go in reverse because the facets are always being calculated with the set min and max visitor values.
So I'm kinda stuck at the moment. Does anyone have any experience making a custom slider component that works with the react search-ui? I'm wondering if I just have to send out a separate request in my slider component specifically to get the absolute min & max facets without the slider filter included, so that it updates when other filters are selected.
Here's the facet config I'm using.
facets: {
states: {
type: "value",
size: 100,
},
visitors: [
{
type: 'value',
name: 'visitors_min',
sort: { value: 'asc' },
size: 1,
},
{
type: 'value',
name: 'visitors_max',
sort: { value: 'desc' },
size: 1,
},
],
world_heritage_site: {
type: "value",
size: 100,
},
},