Wrapper of vue-slider: changing min/max and value yields errors

[digEmAll]

Hi, in order to define a date-range slider, I wrapped a vue-slider as shown in this simple fiddle : https://jsfiddle.net/9t2u0sja/

But, when I try to change min/max and value, it yields : [VueSlider error]: The "value" cannot be less than the minimum.

Am I doing something wrong ?

Thanks in advance

[NightCatSama]

Because value and min/max cannot be set to the component at the same time, an error will occur, but it will not affect the use.

You can set silent: true first to hide the error, I will find a way to solve this problem later.

thank you for your feedback.

[digEmAll]

Yeah, I supposed it was something like that... but, as you well know, in an async world is really difficult to do things in the correct order :)

Thanks a lot for the quick response !

[NightCatSama]

@digEmAll I can't think of a good way to solve it. 😞

[KCMertens]

Instead of adding seperate watchers for many props, maybe something like the following could work? When you do this, your watcher will still work as usual, but it'll be called only once, even if min, max and value are updated at the same time.

{
    computed: {
        valueAndRange() {
            return {
                min: this.min,
                max: this.max,
                value: this.value
            }
        }
    },
    watch: {
        valueAndRange(v: {min: number; max: number; value: any;}) {
            // This handler runs at the end of the vue "tick"
            // So if all three values are updated at the same time, 
            // this handler only runs once and you can use all three new values.
            // So now you can validate them at the same time
        }
    }
}

[inunez-vex]

Instead of adding seperate watchers for many props, maybe something like the following could work? When you do this, your watcher will still work as usual, but it'll be called only once, even if min, max and value are updated at the same time.

{
    computed: {
        valueAndRange() {
            return {
                min: this.min,
                max: this.max,
                value: this.value
            }
        }
    },
    watch: {
        valueAndRange(v: {min: number; max: number; value: any;}) {
            // This handler runs at the end of the vue "tick"
            // So if all three values are updated at the same time, 
            // this handler only runs once and you can use all three new values.
            // So now you can validate them at the same time
        }
    }
}

I'm having the same problem as I have dynamic 'max' and 'interval' values, so this answer should be implemented as it doesn't look too intrusive and should maintain current functionality. Silencing the errors is not a good practise.