input[type='range']中,设置max:1.5和min:1，如何适配进度高亮，如下图和代码

Z时代
2024-01-10
分类：技术分享

问题

在max:100,min:1时，进度高亮是正常的，现在想要max:1.5和min:1时,也适配进度高亮

max:100,min:1
input[type='range']中,设置max:1.5和min:1，如何适配进度高亮，如下图和代码

max:1.5和min:1
input[type='range']中,设置max:1.5和min:1，如何适配进度高亮，如下图和代码

代码

<template>
<div>
<div>
<input id="range"
type="range"
:max="max"
:min="min"
:step="step"
:value="value">
</div>
<div>
<p>value:{{value}}</p>
<p>backgroundSize:{{backgroundSize}}</p>
<p>step:{{step}}</p>
</div>
</div>
</template>
<script>
export default {
name: '',
data () {
return {
value: 0,
backgroundSize: '',
max: 100,
min: 1,
// max: 1.5,
// min: 1,
step: 0.01
}
},
mounted () {
this.fn()
},
methods: {
fn () {
var range = document.getElementById("range");
let that = this;
range.onmousemove = function () {
that.value = range.value
//max:100,min:1
that.backgroundSize = that.value + '%100%'
//max:1.5,min:1
// that.backgroundSize = range.value * (1 / 0.015).toFixed(2) + '%100%'
range.style.backgroundSize = that.backgroundSize;
}
}
}
}
</script>
<style>
input[type="range"] {
-webkit-appearance: none;
/* 去除默认样式 */
background: -webkit-linear-gradient(#2e9cfb, #2e9cfb) no-repeat, #E5E5E5;
background-size: 0 100%;
width: 300px;
height: 4px;
border-radius: 2px;
}
/* 去除获取焦点时的边框 */
input[type="range"]:focus {
outline: none;
}
/* chrome自定义滑动轨道 */
input[type="range"]::-webkit-slider-runnable-track {
height: 4px;
border-radius: 2px;
}
/* chrome自定义滑块 */
input[type="range"]::-webkit-slider-thumb {
position: relative;
top: -8px;
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
border: 2px solid #70B8FF;
}</style>