Skip to content
This repository has been archived by the owner on Dec 30, 2022. It is now read-only.

Problem with ais-range-slider FACET STATS #1147

Closed
seifrached opened this issue Sep 15, 2022 · 2 comments
Closed

Problem with ais-range-slider FACET STATS #1147

seifrached opened this issue Sep 15, 2022 · 2 comments

Comments

@seifrached
Copy link

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

@Haroenv
Copy link
Contributor

Haroenv commented Sep 19, 2022

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
Copy link
Author

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

@Haroenv Haroenv closed this as completed Sep 20, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants