[vue3.x] Control the value in two different inputs

[charle-connoringold]

Similar to #408 and #592.When I move the slider around the input values update but if I change the inputs values the slider doesn't update.

Here's my code:

    <script setup>
    import { ref} from 'vue'
    import VueSlider from 'vue-slider-component'
    import 'vue-slider-component/theme/material.css'
    const value = ref([0, 100])
    </script>
    
    <template>
      <input type="text" v-model.number="value[0]">
      <vue-slider ref="slider" v-model="value" :contained="true" />
      <input type="text" v-model.number="value[1]">
    </template>

Here'e what it looks like:

But it should look like this:

What's also strange is if I check the Vue devtools the value updates:

[NightCatSama]

As #408 issue says, you can't change value[0] responsively by modifying it directly - that's a problem with the vue framework itself.

[charle-connoringold]

As #408 issue says, you can't change value[0] responsively by modifying it directly - that's a problem with the vue framework itself.

Since that was on an older version of Vue I was hoping they might have fixed it.
Regardless do you have a workaround for Vue 3?
Thanks.

[NightCatSama]

@charle-connoringold You can make a new copy of the value, like this:

<input :value="value[0]" @change="value = [+$event.target.value || 0, value[1]]">

[charle-connoringold]

@NightCatSama Thanks for that!

I wanted to prohibit slider crossing so I turned it into a function. If anyone else runs into this here's the code:

<script setup>
import { ref, defineProps } from 'vue'

const value = ref([1, 50])

const handleChange = (val) => {
  if (Number(val[0]) >= Number(val[1])) {
    return
  } else if (Number(val[1]) <= Number(val[0])) {
    return
  }
  value.value = val
}
</script>

<template>
  <vue-slider v-model="value"  :enable-cross="false" />
<input class="max-w-[100px] text-center py-0 md:py-1" type="text" :value="value[0]"
  @change="handleChange([$event.target.value || 0, value[1]])">

<input class="max-w-[100px] text-center py-0 md:py-1" type="text" :value="value[1]"
  @change="handleChange([value[0], $event.target.value || 0])">

</template>