slider与input联动效果

最新推荐文章于 2025-01-18 12:15:27 发布

原创最新推荐文章于 2025-01-18 12:15:27 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何在前端开发中使用Vue.js和JavaScript实现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;
    },