Vue-slider-component: TypeError: Cannot read property 'value' of undefined

[k0fi]

Hello,
I'd like to make a range slider

<vue-slider ref="slider" v-bind="heightRange" v-model="heightRange.value"></vue-slider>
In the data I have defined heightRange as follows:

heightRange: {
        value: [
        150,
        200
        ],
        width: "100%",
        height: 8,
        //etc
      },

But whenever I move one of the knobs, I get this:

TypeError: Cannot read property 'value' of undefined

How can I fix this?

[DenisNP]

AFAIK, 'value' in options is used for initial setup, but not for changeable variable. So, move your model variable outside of options object, like this:

<vue-slider ref="slider" v-bind="heightRange" v-model="currentValue"></vue-slider>

//data: {
currentValue: [150,200], //this will be changing during process
heightRange: {
    value: [150,200], //this is initial value
    width: "100%",
    height: 8 //, 
    //etc
}
//}