elementUI slider 带区间选择怎么实现双向绑定?

项目需要实现一个滑块功能,点击滑条下方的标识文字,滑条带范围地滑到对应的上方位置,而且,可以保留拖拽滑动,如下图

Snipaste_2019-11-23_22-40-34.jpg\
2.jpg

使用elementUI slider组件在实现过程中,发现绑定的参数不能双向动态绑定修改滑块的位置

然后,我试着利用提供给的input和change事件用笨办法来处理,主要思路是将滑条分3份(0-33,33-66,66-100),判断回调参数的当前位置属于哪个区间,就直接将value[0,33]或[33,66]。

问题来了

  1. 点击一次滑条上任意位置(注意我是点击),input会执行三次,造成会将已经判断设置好的位置被重新覆盖。(猜想,滑块设置进度值不是直接设置,而是模拟点击设置,导致input、change再次执行,执行后判断还需要设置值,又再执行input)
  2. 拖拽方面,设置了markCout参数,拖拽会计数递增,以此来判断是拖拽,还是点击;如果是拖拽,就不判断设置拖动范围了
  3. 但是因为拖拽也要实现自能在0,33,66,100间断点停留,这就造成和问题2冲突\
  4. 无论是点击,还是拖拽,input 和change事件都会执行,造成保留拖拽值就不能点击指定区间,头大

各种冲突,怀疑我这个方法是不可行的

代码如下,应该怎么实现?给个思路也行,谢谢各位

<el-slider v-model="markInter" :range="true" :show-tooltip="false" :max="100" :marks="marks" @input="sliderInputEv" @change="sliderChangeEv"></el-slider>
marks: {
                    //标记和样式设置
                    0: '',
                    33: 'Average',
                    66: 'Above avg',
                    100: 'Hot'
                },
 methods: {
            sliderInputEv(value) {
                this.markCount ++
                if(this.markCount > 5){//判断是拖拽,还是点击,拖拽就不设置了
                    this.markCount =0
                    return
                }
                 this.markCount =0
                let min = value[0]//获取回调区间数值
                let max = value[1]
                if(min <30 || max < 30){
                    this.markInter[0] =0//重新设置范围
                    this.markInter[1] =33
                    return
                }
                if(min >33 && min <66){
                    this.markInter[0] =33
                    this.markInter[1] =66
                    return
                }
                if(min >66 && min <100){
                    this.markInter[0] =66
                    this.markInter[1] =100
                    return
                }
                if(max >33 && max <66){
                    this.markInter[0] =33
                    this.markInter[1] =66
                    return
                }
                if(max >66 && max <100){
                    this.markInter[0] =66
                    this.markInter[1] =100
                }

            }

        }
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!