# Creating a slider filter with a min and max that changes when other filters are changed

**URL:** <https://discuss.elastic.co/t/creating-a-slider-filter-with-a-min-and-max-that-changes-when-other-filters-are-changed/361646>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [June 18, 2024, 12:49pm UTC](https://discuss.elastic.co/t/creating-a-slider-filter-with-a-min-and-max-that-changes-when-other-filters-are-changed/361646 "2024-06-18T12:49:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tom5](https://avatars.discourse-cdn.com/v4/letter/t/a183cd/32.png) [@tom5](https://discuss.elastic.co/u/tom5)\
**Post date:** [June 18, 2024, 12:49pm UTC](https://discuss.elastic.co/t/creating-a-slider-filter-with-a-min-and-max-that-changes-when-other-filters-are-changed/361646/1 "2024-06-18T12:49:03Z")

</div>

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.

![set_only_at_beginning](https://us1.discourse-cdn.com/elastic/original/3X/6/a/6a698c34a2de672b49b442f0566457e564ff0004.gif)

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.

![update_on_every_filter_change](https://us1.discourse-cdn.com/elastic/original/3X/b/6/b62d7380e5b0cc55f4dbcd6a482aaf2e8f08fe0c.gif)

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.

```auto
    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,
      },
    },

```

---

<div class="post-metadata">

**Author:** ![Yan\_Savitski](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/yan_savitski/32/126980_2.png) [@Yan\_Savitski](https://discuss.elastic.co/u/Yan_Savitski)\
**Post date:** [June 21, 2024, 9:59pm UTC](https://discuss.elastic.co/t/creating-a-slider-filter-with-a-min-and-max-that-changes-when-other-filters-are-changed/361646/2 "2024-06-21T21:59:54Z")

</div>

Hey  
Thank you for your question  
As your filters apllying onchange you better set them as "disjunctive" facets. It will show all available options even when values are selected.  
[doc](https://www.elastic.co/docs/current/search-ui/api/react/components/facet#example-of-an-or-based-facet-filter)

---

<div class="post-metadata">

**Author:** ![tom5](https://avatars.discourse-cdn.com/v4/letter/t/a183cd/32.png) [@tom5](https://discuss.elastic.co/u/tom5)\
**Post date:** [July 3, 2024, 7:48am UTC](https://discuss.elastic.co/t/creating-a-slider-filter-with-a-min-and-max-that-changes-when-other-filters-are-changed/361646/3 "2024-07-03T07:48:58Z")

</div>

Yeah you're right! I guess I didn't fully understand the disjunctive facets list config. Thanks!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 31, 2024, 7:49am UTC](https://discuss.elastic.co/t/creating-a-slider-filter-with-a-min-and-max-that-changes-when-other-filters-are-changed/361646/4 "2024-07-31T07:49:58Z")

</div>

Closed on July 31, 2024, 7:49am UTC

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.