[V3 - Vue] Range event not firing and props are not reactive

I have the following code.

<f7-list no-hairlines-md>
    <f7-input type="range" :value="v" :min="min" max="100" step="1" @input="f"></f7-input>
  1. Input event is not firing.
  2. I want to pass number less then 1 to step, value, and min.
  3. I want min to be reactive.

I don’e know how to solve these problems.
Can somebody help me?

This kind of input is a wrap for f7-range. It is better to use it instead if you need more control http://framework7.io/vue/range-slider.html

All props here instead of value are not reactive. You need to get Range instance and set these props on it:

<f7-range ref="range" ... >
var range = this.refs.range.f7Range;
range.min = newValue;
range.step = newValue;
1 Like