Как сделать переключение слайдов в Hooper ползунком диапазона?

Мне нужно, чтобы Hooper менял слайды в зависимости от того, какое значение имеет ползунок диапазона. То есть, если ползунок выставлен на значение "6", Hooper должен переключаться на слайд с индексом "6". Я следовал примеру документации, но мое решение не работает. Вот код:

HTML:

<div class="range-slider">
  <input
    class="range-slider__input"
    type="range"
    min="0"
    max="10"
    v-model="rangeSliderValue"
  />
  <p>{{ rangeSliderValue }}</p>
</div>
<hooper
  class="weekly-novelties__slider"
  :settings="hooperSettings"
  @slide="updateCarousel"
></hooper>
<slide
  class="weekly-novelties__slide-container"
  v-for="(slide, indx) in slides"
  :key="indx"
  :index="indx"
>*slide*
</slide>

JS:

<script>
import {
  Hooper,
  Slide,
  Progress as HooperProgress,
  Pagination as HooperPagination,
  Navigation as HooperNavigation,
} from 'hooper'
import 'hooper/dist/hooper.css'

export default {
  name: 'WeeklyNovelties',
  components: {
    Hooper,
    Slide,
  },
  data() {
    return {
      rangeSliderValue: 0,
      hooperSettings: {
        itemsToShow: 3.932,
        itemsToSlide: 2,
        ref: 'carousel',
        navigation: {
          type: 'custom',
        },
        // initialSlide: 2,
        // infiniteScroll: true,
      },
      watch: {
        carouselData() {
          this.$refs.carousel.slideTo(this.rangeSliderValue)
        },
      },
      methods: {
        updateCarousel(payload) {
          this.myCarouselData = payload.currentSlide
        },
        changeSliderValue() {
          this.$refs.carousel.slideTo(this.rangeSliderValue)
        },
      },
    }
  },
  setup() {
    const slides = Array.from({ length: 10 }).map(
      (el, index) => `Slide ${index + 1}`
    )
    return {
      slides,
    }
  },
}
</script>

Значение переменной rangeSliderValue отображается корректно, но при перемещении ползунка диапазона карусель слайды не переключает