vue-instantsearch ais-range-slider FACET STATS

Viewed 31

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

0 Answers
Related