NightCatSama/vue-slider-component

@change not consistent when value is a range

tomkp75 opened this issue · 2 comments

Describe the bug

When value is a range, change triggers multiple times and returns inconsistent values when reaching min/max:

<vue-slider :value="[0, 5]" :data="[0, 1, 2, 3, 4, 5]" :enable-cross="false" :adsorb="true" @change="onChange" />

onChange (value) { console.log(value) }

  1. This code prints multiple times to the console between two values
  2. Moving the max down from 5 to 4 returns the range [0, 4] correctly, but going back to 5 still returns [0, 4] instead of [0, 5]

Environment (If you feel unrelated, please delete the block)

  • OS & Version: MacOS 10.15.1
  • Vue version: v2.6.12
  • Component Version: v3.2.15

You need to set the value to a dynamic value, otherwise the @change event will not be triggered when the component internally determines that the value has not changed.

e.g.

<vue-slider :value="value" :data="[0, 1, 2, 3, 4, 5]" :enable-cross="false" :adsorb="true" @change="onChange" />
onChange(value) { this.value = value }

// or

<vue-slider v-model="value" :data="[0, 1, 2, 3, 4, 5]" :enable-cross="false" :adsorb="true" @change="onChange" />

Absolutely