seifrached commented 1 year ago

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

```

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

bidoubiwa commented 1 year ago

Hey @seifrached, to make the range slider work with Meilisearch it requires some tweaks because indeed we do not provide the min and max values. Here is the explanation in the instant-meilisearch readme.

There is not really a perfect solution, if you'd like to see this implemented could you react on the product repository?

seifrached commented 1 year ago

product

Thanks for the explanation

bidoubiwa commented 1 year ago

Closing as it is related to the product :)

meilisearch / meilisearch-vue

Problem with ais-range-slider FACET STATS #119

console.log(value) max: undefined min: undefined