Problem with ais-range-slider FACET STATS

[seifrached]

Hi everyone,

I tried using an example that works well like vue-instantsearch
from official doc https://www.algolia.com but it didn't work !!!
Mainly the problem is due "RANGE" value from the slot, always 0 {range.min AND range.max} !
the minimum and maximum value is not automatically computed by Algolia from the data in the index.

<ais-instant-search :search-client="searchClient" index-name="NAME_OF_INDEX">


<ais-range-input attribute="area">
  <template v-slot="{ currentRefinement, range, refine, canRefine }">     
   <label>Area Range</label>     
    <vue-slider
          :min="range.min"
          :max="range.max"
          :value="toValue(currentRefinement, range)"
          :disabled="!canRefine"
          :lazy="true"
          :useKeyboard="true"
          :enableCross="false"
          tooltip="always"
          :duration="0"
          @change="refine({ min: $event[0], max: $event[1] })">
    </vue-slider>
  </template>
</ais-range-input>


</ais-instant-search>

BUT

Trying to use :min="0" :max="100" inside it work ≈ But the problem is that I can't retrieve any record >= to :max="100" !!!

<ais-instant-search :search-client="searchClient" index-name="NAME_OF_INDEX">


<ais-range-input attribute="area" :min="0" :max="100">
  <template v-slot="{ currentRefinement, range, refine, canRefine }">     
   <label>Area Range</label>     
    <vue-slider
          :min="range.min"
          :max="range.max"
          :value="toValue(currentRefinement, range)"
          :disabled="!canRefine"
          :lazy="true"
          :useKeyboard="true"
          :enableCross="false"
          tooltip="always"
          :duration="0"
          @change="refine({ min: $event[0], max: $event[1] })">
    </vue-slider>
  </template>
</ais-range-input>


</ais-instant-search>

methods:{

toValue(value, range) {
console.log(value,range)
           return [
               typeof value.min === "number" ? value.min : range.min,
               typeof value.max === "number" ? value.max : range.max,
           ];
       },
}

console.log(value)
    max: undefined
    min: undefined
=======================
console.log(range)
    max: 0
    min: 0

environment:
"Laravel 8 scout",
"Vue": "^2.6.12",
"Vue-slider-component": "^3.2.20",
"@meilisearch/instant-meilisearch": "^0.7.1", AS DRIVER OF SCOUT
"algolia/algoliasearch-client-php": "^3.3",

[Haroen Viaene]

This is an issue with meilisearch I think, so I can't help further. Likely the facet isn't set up or mapped correctly, causing the range not to be returned

[seifrached]

This is an issue with meilisearch I think, so I can't help further. Likely the facet isn't set up or mapped correctly, causing the range not to be returned

Thanks