具有可变最大值的范围滑块
具有可变最大值的范围滑块
提问于 2020-10-08 22:24:29
我有一个范围的滑块，可以设置为可变的最大值。40、60、80、200等等。我使用Javascript将滑块元素的背景设置为基于滑块值的特定颜色。
const slider = document.getElementById('myRange')
slider.addEventListener('input', function () {
const sliderValue = slider.value
const color = 'linear-gradient(to right, #2B73CC ' + sliderValue + '%, #fff 0%)'
slider.style.background = color
}仅当最大值设置为100时，该选项才有效。因为我使用slider.value作为%来设置滑块的背景样式。
如何更改sliderValue的值以反映%的实际值
示例:范围滑块的最大值设置为40。当用户滚动到滑块的末尾时，该值为40。现在它将40%传给了我的后台，填充了40%的滑动条。
我需要一些方法来设置sliderValue为100%，如果slider.value等于范围滑块上设置的最大值。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-10-08 22:35:39
您可以将value除以max，再乘以100。
const onSliderChange = (e) => {
const
slider = e.target,
container = slider.parentElement,
{ value, max } = slider,
percentage = value / max * 100,
color = `linear-gradient(to right, #2B73CC ${percentage}%, #fff 0%)`;
container.style.background = color;
};
const
sliderContainer = document.querySelector('.slider-container'),
slider = sliderContainer.querySelector('.slider');
slider.addEventListener('input', onSliderChange);.slider-container .slider {
width: 100%;
}<div class="slider-container">
<input type="range" min="1" max="40" value="10" class="slider">
</div>
Stack Overflow用户
发布于 2020-10-08 22:32:49
耗费了我所有的精力来解决这个问题。数学不是我的强项。但是：
console.log(sliderValue / (this.sliderValues.max / 100))应该可以工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64264624
复制相关文章
相似问题
腾讯云开发者
