element ui Slider 范围滑块 在input中修改值时无法同步到滑块

Question

<el-slider
                    v-model="value"
                    range
                    :max="5120"
                    class="mt10"
                  >
                  </el-slider>
                  <div class="flex-center mt10">
                    <el-input-number v-model="value[0]" controls-position="right" size="mini" :min="0" :max="5120"></el-input-number>
                    <span class="ml10 mr10">—</span>
                    <el-input-number v-model="value[1]" controls-position="right" size="mini" :min="0" :max="5120"></el-input-number>
                    <span class="ml10">M</span>
                  </div>
                  

data() {
    return {
      value: [0, 5120]
    }
  },

我在 el-input-number 中改变value中的值 滑块中没有变化

请问应该如何在外部更改值 同步 到滑块内

Answer 1

给el-input-number添加@change
`<div class="flex-center mt10">

                <el-input-number v-model="navType3Label2Value[0]" controls-position="right" size="mini" :min="0" :max="5120" @change="fileSizeChange"></el-input-number>
                <span class="ml10 mr10">—</span>
                <el-input-number v-model="navType3Label2Value[1]" controls-position="right" size="mini" :min="0" :max="5120" @change="fileSizeChange"></el-input-number>
                <span class="ml10">M</span>
              </div>
              `

给el-slider加上v-if
`<el-slider

                v-if="fileSizeShow"
                v-model="navType3Label2Value"
                range
                :max="5120"
                class="mt10"
              >
              </el-slider>`
              

fileSizeChange事件

`fileSizeChange() {

  this.fileSizeShow = false
  const _this = this
  setTimeout(function() {
    _this.fileSizeShow = true
  }, 10)
},`

Answer 2

楼主解决了吗
我找到了另一种方法
1.

<el-input-number :max="10" :min="0" @change="numberChange" v-model="valueNew[0]"></el-input-number>

<el-slider  range show-stops v-model="value"></el-slider>

<el-input-number :max="30" :min="0" @change="numberChange" v-model="valueNew[1]"></el-input-number>

2.

data:{
    value:[1,3]
},
computed: {
    valueNew() {
        return JSON.parse(JSON.stringify(this.value))
    }
}

3.

 numberChange() {
     this.value = this.valueNew
 },

Answer 3

使用v-if强制刷新页面会闪一下。可以在组件绑定一个key,在input的change事件中更改key的值。

<el-slider
 :key="componentKey"
 v-model="setting.standard.noise"
 range
 :marks="setting.marks.noise"
 :min="0"
 :max="80"
>
</el-slider>
<el-input class="standard-item-input" v-model="setting.standard.noise[0]" @change="manualChange()"></el-input>
<span>~</span>
<el-input class="standard-item-input" v-model="setting.standard.noise[1]" @change="manualChange()"></el-input>

input绑定方法：

manualChange:function(){
    this.componentKey+=1;
 },