Input Binding with Vue 3

[hasan-ozbey]

I'm using this repo with Vue 3 and TypeScript to create a range slider with two corresponding input fields (for minimum and maximum values). When I move the slider handles, the input fields update correctly. However, when I manually change the input values, the slider does not reflect this change.

It seems like the slider does not detect external changes to the min and max values once it’s initialized. I couldn’t find any method in documentation to programmatically update the slider position based on input values. Is there a built-in way to synchronize the slider with input changes?

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

const rangeDefinitions = {
  power: { min: 0, max: 81, step: 10 }
}

const rangeStates = reactive({
  power: { min: rangeDefinitions.power.min, max: rangeDefinitions.power.max }
})

const $powerRangeSliderNode = ref(null)

onMounted(async () => {
  const { default: RangeSlider } = await import('svelte-range-slider-pips')

  const powerRangeSlider = new RangeSlider({
    target: $powerRangeSliderNode.value,
    props: {
      values: [rangeStates.power.min, rangeStates.power.max],
      pips: true,
      range: true,
      float: true,
      step: rangeDefinitions.power.step,
      min: rangeDefinitions.power.min,
      max: rangeDefinitions.power.max,
      suffix: 'k'
    }
  })

  powerRangeSlider.$on('change', (e) => {
    rangeStates.power.min = e.detail.values[0]
    rangeStates.power.max = e.detail.values[1]
  })
})
</script>

<template>
  <div>
    <h4>Engine Power (kW)</h4>
    <div class="flex items-center gap-4 mt-4">
      <!-- Minimum Value Input -->
      <UFormGroup label="Minimum" name="engine-power-minimum">
        <UInput
          v-model="rangeStates.power.min"
          type="number"
          :min="rangeDefinitions.power.min"
          :max="rangeStates.power.max"
          :step="rangeDefinitions.power.step"
          :placeholder="rangeStates.power.min.toString()"
        />
      </UFormGroup>

      <!-- Maximum Value Input -->
      <UFormGroup label="Maximum" name="engine-power-maximum">
        <UInput
          v-model="rangeStates.power.max"
          type="number"
          :min="rangeStates.power.min"
          :max="rangeDefinitions.power.max"
          :step="rangeDefinitions.power.step"
          :placeholder="rangeStates.power.max.toString()"
        />
      </UFormGroup>
    </div>

    <!-- Slider Element -->
    <div id="power-slider" ref="$powerRangeSliderNode" class="mt-8 px-2" />
  </div>
</template>

Moving the slider updates rangeStates.power.min and rangeStates.power.max, which reflects in the UInput fields. However, manually updating the UInput values does not move the slider handles accordingly.

Any guidance on how to sync the slider with manual input changes would be appreciated!

[hasan-ozbey]

Forgot to mention that if I import this package synchronously (import RangeSlider from 'svelte-range-slider-pips') I get this error on Nuxt while using new RangeSlider()

"Class extends value undefined is not a constructor or null"

[simeydotme]

This i would need a Nuxt/Vue expert to help understand, I really have very minimal experience with Nuxt, and not much working experience of Vue3 🙇

[simeydotme]

Here's a working version based on the documentation website link to "see a vue example running at play.vuejs"

If you have any improvements / suggestions for the documentation to help Vue users get started easier, please let me know and/or create some PRs on the astro-pages branch 🙏

[simeydotme]

I'm sure someone who's a Vue expert could extract this;

    <input type="number" :value="values[0]" @input="(e) => {
      values[0] = e.target.valueAsNumber;
      mySlider.$set({ values: values, range: true })
    }">

into some kind of directive / action that auto-binds to a slider.
If you / someone comes up with that, please let me know so we can add it to the Documentation 🙏

[simeydotme]

Ok, there's an even easier way to do it;

see here, im using v-model and an generic slider update function.

[hasan-ozbey]

oh seems like it would work, I'll give it a try as soon as possible. I wasn't aware that there is a built-in method to set slider values. Is this written somewhere in the documentation? 😅

[simeydotme]

I wasn't aware that there is a built-in method to set slider values. Is this written somewhere in the documentation? 😅

Actually it's not documented except for that example, because it's a built-in part of Svelte component system actually. Thats why I really like authoring components in Svelte!

However it's only applicable to non-svelte environments and I haven't done a lot in regards to documenting that
It's a good spot to cover! thanks

(p.s. you're the first person I'm aware of that is using this outside of svelte! hope it is working nice and smooth for you!)

[hasan-ozbey]

For my case, I found it better to use a watcher instead of the @input event.

const updateRangeSlider = (rangeSlider, values: number[]) => rangeSlider?.$set({ values })

watch(
  () => rangeStates.power,
  (value) => {
    updateRangeSlider(powerRangeSlider, [value.min, value.max])
  },
  { deep: true }
)

It is working perfectly. Thanks for this beautiful repository!

---

Just o be sure, this $set method does not fire $on('change') method, right?

[simeydotme]

Just o be sure, this $set method does not fire $on('change') method, right?

from what I observed; No.
Change only fires when the slider was interacted with directly

It is working perfectly. Thanks for this beautiful repository!
❤️