javascript - 如何使用 Vue Range Slider 将数字范围从一个点更改为另一个点
问题描述
我正在使用npm 包 vue-custom-range-slider 但我有一个问题我的滑块分为蓝色、绿色、黄色、红色四种颜色,看起来像这样
最小数量19和最大数量65
想象一个人可以选择某个年龄的蓝色是19到21绿色22到30黄色31到49的范围最后一个红色在50以上一个更容易理解的例子你可以看这张图
我使用线性渐变将滑块分成四种滑块颜色,现在让我解释一下这个问题。
我需要制作蓝色范围的数字,即19到21的数字在蓝色内,22-30在绿色内,31-49在黄色内,50以上在红色内
因为此刻数字设置不正确,例如蓝色的数字设置为从19到30等等,所有
我建议在codeandbox 中查看此代码以便更好地理解。
<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>
解决方案
将愤怒转换为百分比:
#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%
推荐阅读
- python - 'RawReactionActionEvent' 对象没有属性 'guild'
- python - discord.py 1.3.2:如何在用户按下表情符号反应时检测和执行代码
- python - 我想知道这个python程序的工作过程
- php - 为什么我不能在 WordPress functions.php 中将多个 Google 字体排入队列?
- python-3.x - 用python解决耦合PDE
- angular - Angular $localize 使用动态翻译 ID
- r - 如何在向量中使用 onehot 编码和 dummyVars?
- vuejs2 - 为什么使用 vuetable-2 组件时出现未知的自定义元素错误?
- vue.js - vue会在客户端下载所有页面吗?
- javascript - 我可以在 nuxt.config.js 中访问 nuxt 上下文吗?