如何使用 Vue Range Slider 将数字范围从一个点更改为另一个点答案

【问题标题】：How to change a range of numbers from one point to another using Vue Range Slider如何使用 Vue Range Slider 将数字范围从一个点更改为另一个点
【发布时间】：2021-05-07 13:18:26
【问题描述】：

我正在使用npm package vue-custom-range-slider 但是我有一个问题，我的滑块分为蓝色，绿色，黄色，红色四种颜色，看起来像这样

最小数量 19 和最大数量 65

想象一个人可以选择某个年龄的蓝色是从19到21绿色22到30 黄色 31 到 49，最后一个红色在 50 以上，为了更容易理解的例子，你可以看这张图片

我使用线性渐变将滑块分成四种滑块颜色，现在让我解释一下问题。

我需要制作蓝色范围的数字，即19到21的数字在蓝色范围内，22 - 30 在绿色内 31-49 在黄色内，50 在红色内

因为此刻数字设置不正确，例如蓝色的数字设置为从19到30等等全部 p>

我建议查看code in codesandbox 以获得更好的理解。

<template>
      <div class="slider-container">
        <custom-slider
          v-model="value"
          class="slider-containers"
          min="19"
          max="65"
          step="1"
        />
      </div>
</template>

<script>
import CustomSlider from "vue-custom-range-slider";
import "vue-custom-range-slider/dist/vue-custom-range-slider.css";

export default {
  name: "app",
  components: {
    CustomSlider,
  },
  data() {
    return {
      value: "0",
    };
  },
};
</script>

<style lang="scss">
$slider-track-background: linear-gradient(
  to right,
  #b9e3e2 25%,
  #bbf680 25%,
  #bbf680 50%,
  #ffe500 50%,
  #ffe500 75%,
  #e5809e 75%,
  #e5809e 100%
) !default;
</style>

【问题讨论】：

标签： javascript vue.js vuejs2 range

【解决方案1】：

将愤怒转化为百分比：

#b9e3e2 6.52173913%, //22
#bbf680 6.52173913%, 
#bbf680 26.08695652%, // 31
#ffe500 26.08695652%,
#ffe500 67.39130435%, // 50
#e5809e 67.39130435%,
#e5809e 100%

或者甚至像这样，如果你想在不同年龄之间改变颜色。

#b9e3e2 5.434782609%, // 21.5
#bbf680 5.434782609%,
#bbf680 25%, // 30.5
#ffe500 25%,
#ffe500 66.30434783%, // 49.5
#e5809e 66.30434783%,
#e5809e 100%

【讨论】：