title: vue-instantsearch ais-range-slider FACET STATS
body: <p>I tried using an example that works well like <a href="https://vue-instantsearch.netlify.app/stories/?selectedKind=ais-range-input&amp;selectedStory=with%20vue-slider-component&amp;full=0&amp;addons=1&amp;stories=1&amp;panelRight=1&amp;addonPanel=storybooks%2Fstorybook-addon-knobs" rel="nofollow noreferrer">vue-instantsearch</a>
  from official doc <a href="https://www.algolia.com/doc/api-reference/widgets/range-slider/vue/" rel="nofollow noreferrer">https://www.algolia.com</a> but it didn't work !!!
  Mainly the problem is due &quot;RANGE&quot; 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.</p>
  
  <pre><code>&lt;ais-range-input attribute=&quot;area&quot;&gt;
    &lt;template v-slot=&quot;{ currentRefinement, range, refine, canRefine }&quot;&gt;     
     &lt;label&gt;Area Range&lt;/label&gt;     
      &lt;vue-slider
            :min=&quot;range.min&quot;
            :max=&quot;range.max&quot;
            :value=&quot;toValue(currentRefinement, range)&quot;
            :disabled=&quot;!canRefine&quot;
            :lazy=&quot;true&quot;
            :useKeyboard=&quot;true&quot;
            :enableCross=&quot;false&quot;
            tooltip=&quot;always&quot;
            :duration=&quot;0&quot;
            @change=&quot;refine({ min: $event[0], max: $event[1] })&quot;&gt;
      &lt;/vue-slider&gt;
    &lt;/template&gt;
  &lt;/ais-range-input&gt;
  
  
  &lt;/ais-instant-search&gt;
  </code></pre>
  <p>BUT</p>
  <p>Trying to use :min=&quot;0&quot; :max=&quot;100&quot; inside it work ≈ But the problem is that I can't retrieve any record &gt;= to :max=&quot;100&quot; !!!</p>
  
  <pre><code>&lt;ais-range-input attribute=&quot;area&quot; :min=&quot;0&quot; :max=&quot;100&quot;&gt;
    &lt;template v-slot=&quot;{ currentRefinement, range, refine, canRefine }&quot;&gt;     
     &lt;label&gt;Area Range&lt;/label&gt;     
      &lt;vue-slider
            :min=&quot;range.min&quot;
            :max=&quot;range.max&quot;
            :value=&quot;toValue(currentRefinement, range)&quot;
            :disabled=&quot;!canRefine&quot;
            :lazy=&quot;true&quot;
            :useKeyboard=&quot;true&quot;
            :enableCross=&quot;false&quot;
            tooltip=&quot;always&quot;
            :duration=&quot;0&quot;
            @change=&quot;refine({ min: $event[0], max: $event[1] })&quot;&gt;
      &lt;/vue-slider&gt;
    &lt;/template&gt;
  &lt;/ais-range-input&gt;
  
  
  &lt;/ais-instant-search&gt;
  
  
  methods:{
  
  toValue(value, range) {
  console.log(value,range)
             return [
                 typeof value.min === &quot;number&quot; ? value.min : range.min,
                 typeof value.max === &quot;number&quot; ? value.max : range.max,
             ];
         },
  }
  
  console.log(value)
      max: undefined
      min: undefined
  =======================
  console.log(range)
      max: 0
      min: 0
  </code></pre>
  <p>Environment:</p>
  <p>&quot;Laravel 8 scout&quot;,</p>
  <p>&quot;Vue&quot;: &quot;^2.6.12&quot;,</p>
  <p>&quot;Vue-slider-component&quot;: &quot;^3.2.20&quot;,</p>
  <p>&quot;@meilisearch/instant-meilisearch&quot;: &quot;^0.7.1&quot;, AS DRIVER OF SCOUT</p>
  <p>&quot;algolia/algoliasearch-client-php&quot;: &quot;^3.3&quot;,</p>