vue2+elementui el-slider（两端滑动）改变滑块范围以及tooltip提示信息

效果

正文

在vue页面template部分写入：

      <el-slider
          v-model="valueX"
          //步长 1
          :step="1"
          //show-stops 是否显示间断点
          show-stops
          //range 是否为范围选择，也就是是否是两端都可滑动
          range
          //masks 标记 key的类型必须为number且取值在闭区间[min, max]内,每个标记可以单独设置样式
          :marks="marksX"
          //format-tooltip 格式化tooltip message,也就是更改提示信息的格式或样式
          :format-tooltip="tooltipText"
        >
        </el-slider>

data部分：

 data() {
    return {
      valueX: [0, 100],
      marksX: { 0: "-5", 99: "5" },
     };
  },

method部分：

methods: {
tooltipText() {
      // console.log(value);
      return (((2 * 5) / 100) * value - 5).toFixed(1);
    },
}

结尾

有不足之处，欢迎指出！