min limit not working properly

[plagerweij]

When a min limit is set and the slider is dragged around, modelValue starts behaving strangely. As far as I can tell, this has something to do with the following warning I get in my browser console when I run npm run serve and when a min limit is set:

[Vue warn]: Invalid prop: type check failed for prop "min". Expected Number with value 420, got String with value "420".

It seems that somewhere in your code the min value is interpreted as a string and in turn you perform an unintentional string concatenation instead of an arithmetic addition of modelValue + min.

Also, this min limit does not prevent me from moving below the min limit bounds.

I'm using vue3-slider 1.5.4

[freddie-nelson]

Do you mind sharing your code you are using for the component

[plagerweij]

<template>
  <vue3-slider v-model="myNumber" min=7 />
  <h1>{{ myNumber }}</h1>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import slider from "vue3-slider"

export default defineComponent({
  name: "App",
  components: {
    "vue3-slider": slider
  },
  data() {
    return {
      myNumber: 42
    }
  }
})
</script>

And then as soon as you move the slider, the strange behaviour starts happening.

[freddie-nelson]

You need to do :min="7" thats why you are getting the type check failed error. you are passing a string to min when it should be a number

[plagerweij]

Thanks for the tip, it's working now.

Could you perhaps add that to your README? Similarly to how this person did it:
https://www.npmjs.com/package/vue-circle-slider

[freddie-nelson]

I understand that adding that would help however this is expected knowledge as it is the only way to bind data in Vue and an error is provided that tells you what is wrong.