ais-range-slider not working - Property or method "$event" is not defined on the instance but referenced during render.

[bmpf]

Bug 🐞

Property or method "$event" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Error in render: "TypeError: Cannot read properties of undefined (reading '0')"
TypeError: Cannot read properties of undefined (reading '0')

Code:

<ais-range-input attribute="product_price">
<template v-slot="{ currentRefinement, range , refine }">

    <vue-slider :lazy="true"
    :min="0"
    :max="100"
    :value="toValue(currentRefinement, { min: 0, max: 100 })"
    :change="refine({ min: $event[0], max: $event[1] })"
    />
</template>
</ais-range-input>

What is the expected behavior?

Filter Data based on value price

Does this happen only in specific situations?

The data in not filtered, error on event

What is the version you are using?

"vue-slider-component": "^3.0.33",
"vue-instantsearch": "^4.3.1",
"algoliasearch": "^4.10.3",

[Haroen Viaene]

There's a couple small mistakes on the code sample on the docs, thanks for reporting. This is the correct implementation: https://codesandbox.io/s/trusting-wu-d6810?file=/src/App.vue

This issue will automatically close once the example in the documentation is updated

[bmpf]

Done, working, thank you. :)

[bmpf]

Sorry, I closed without being updated in the documentation

[Haroen Viaene]

No worries, the documentation was merged right after you closed, so I'll close again manually