slider与input联动效果

应用场景

在这里插入图片描述

代码

// template 中
<el-input-number
      :max="400"
      :min="0"
      @change="numberChange"
      v-model="valueNew[0]"
    ></el-input-number>
    <!--  show-stops -->
    <el-slider v-model="value" range></el-slider>

    <el-input-number
      :max="400"
      :min="0"
      @change="numberChange"
      v-model="valueNew[1]"
    ></el-input-number>
// 绑定数据
 value: [0, 400],
// 动态数据
  computed: {
    valueNew() {
      return JSON.parse(JSON.stringify(this.value));
    },
  },
 // methods方法
   numberChange() {
      this.value = this.valueNew;
    },
版权声明：本文为webDevelopSnail原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。