vue-instantsearch ais-range-slider FACET STATS

Issue

This Content is from Stack Overflow. Question asked by Saif Rached

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-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-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”,



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?