Javascript 如何使用Vue范围滑块将数字范围从一个点更改为另一个点
我正在使用 但我有一个问题,我的滑块分为四种颜色,蓝色,绿色,黄色,红色,看起来像这样 最小数量19和最大数量65 想象一下,一个人可以选择某个年龄段蓝色的范围是从19到21绿色22到30黄色31到49,最后一个红色在50以上,你可以看到这张图片 我使用线性渐变将滑块拆分为四种滑块颜色,现在让我解释一下这个问题 我需要为蓝色范围制作数字,即从19到21的数字在蓝色范围内,22-30在绿色范围内31-49在黄色范围内,高于50的数字在红色范围内 因为此时的数字设置不正确,例如,蓝色的数字设置为从19到30,以此类推 为了更好地理解这一点,我建议大家看看Javascript 如何使用Vue范围滑块将数字范围从一个点更改为另一个点,javascript,vue.js,vuejs2,range,Javascript,Vue.js,Vuejs2,Range,我正在使用 但我有一个问题,我的滑块分为四种颜色,蓝色,绿色,黄色,红色,看起来像这样 最小数量19和最大数量65 想象一下,一个人可以选择某个年龄段蓝色的范围是从19到21绿色22到30黄色31到49,最后一个红色在50以上,你可以看到这张图片 我使用线性渐变将滑块拆分为四种滑块颜色,现在让我解释一下这个问题 我需要为蓝色范围制作数字,即从19到21的数字在蓝色范围内,22-30在绿色范围内31-49在黄色范围内,高于50的数字在红色范围内 因为此时的数字设置不正确,例如,蓝色的数字设置为
<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>
从“vue自定义范围滑块”导入自定义滑块;
导入“vue自定义范围滑块/dist/vue自定义范围滑块.css”;
导出默认值{
名称:“应用程序”,
组成部分:{
自定义滑块,
},
数据(){
返回{
值:“0”,
};
},
};
$slider轨迹背景:线性渐变(
对,,
#b9e3e2 25%,
#bbf680 25%,
#bbf680 50%,
#ffe500 50%,
#ffe500 75%,
#e5809e 75%,
#e5809e 100%
) !违约
将范围转换为百分比:
#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%