javascript - VueJS 滑块组件 - 禁用特定范围的值，例如。85-100？

Question

嘿伙计们，我需要一个特定范围的滑块被禁用但仍然显示。

滑块是 vue-component-slider 包

例如，我们有一个名为 previousRange 的项目有多少可用的值假设数字是 85，滑块应显示 0-100 但不能超过 85 或动态数字，知道如何做到这一点吗？非常感谢您！

滑块组件：

<template>
  <div>
    <vue-slider
      v-model="range"
      :marks="marks"
      :tooltip="'active'"
      v-bind="options"
      :order="false"
    ></vue-slider>
  </div>
</template>
<script>
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/default.css";
//import 'vue-slider-component/theme/antd.css'

export default {
  components: {
    VueSlider,
  },
  data() {
    return {
      range: 0,
      options: {
        dotOptions: [
          {
            style: {
              backgroundColor: "#00008B",
            },
          },
        ],
      },
    };
  },
  props: {
    id: {
      type: String,
    },
    //previousRange means the range from earlier process that has happened on the unit
    //this is added so user can only select upto the previous range value instead of 100
    previousRange: {
      type: Number,
      default: 100,
    },
  },
  computed: {
    marks: function () {
      if (!this.previousRange) return [0,100];
      return [0, this.previousRange];
    },
  },
  watch: {
    range: function (val) {
      this.$emit("on-range-change", val);
    },
  },
};
</script>

标签： javascriptvue.jsslider