Searchkit Range filter min and max value of data

Question

I'm having problems with making my range filter more dynamic.

I have a price filter (RangeFilter), which uses a RangeSliderInput as rangeComponent. Which looks like this:

Filtercode:

  <RangeFilter
    title="Prijs"
    field="verkoopprijs"
    id="verkoopprijs"
    min={0}
    max={100}
    showHistogram = {false}
    rangeComponent = {RangeSliderInput}
    translations={{"range.submit":"Zoeken"}}
  />

Instead of the hardcoded min 0 and max 100, I would like to get the minimum value and the maximum value of the field verkoopprijs.

A search result looks like this:

 "hits":{  
          "total":7271,
          "max_score":1.0,
          "hits":[  
             {  
                "_index":"onixts_prod",
                "_id":"9783932346729",
                "_score":1.0,
                "_source":{  
                   "id":"9783932346729",
                   "jaar":"2015",
                   "taal":"Duits",
                   "hoofdtitel":"Therapie-Handbuch Power Tube, Power QuickZap",
                   "verkoopprijs":38.95,
                }
             }
        ]
    }

However. I'm not sure how to get the min and max value.

Answer 1

According the fact that your search result is in a variable called data , to get the min and max of the verkoopprijs field you can:

const min = data.hits.hits.reduce((min, curr) => curr.verkoopprijs < min.verkoopprijs ? curr : min, data.hits.hits[0]);
const max = data.hits.hits.reduce((max, curr) => curr.verkoopprijs > max.verkoopprijs ? curr : max, data.hits.hits[0]);

Then, use it as min and max in your component like

<RangeFilter
    title="Prijs"
    field="verkoopprijs"
    id="verkoopprijs"
    min={min}
    max={max}
    showHistogram = {false}
    rangeComponent = {RangeSliderInput}
    translations={{"range.submit":"Zoeken"}}
/>