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

Questions
1

I have the following code.

<f7-list no-hairlines-md>
  <f7-list-item>
    <f7-label>Range</f7-label>
    <f7-input type="range" :value="v" :min="min" max="100" step="1" @input="f"></f7-input>
  </f7-list-item>
</f7-list>
  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?

2

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