之前曾提出过类似的问题,但没有一个回答我的问题。
题
当滑块位置更改时,如何动态更改范围滑块(::-webkit-slider-thumb
/ ::-moz-range-thumb
)上的CSS属性?
背景:我有一个样式范围拇指,上面有背景图像。滑动时,我想更改背景位置以根据位置显示背景图像的不同部分。我目前拥有的CSS代码只是基本设置,并且只能在Chrome中使用(因为目前这只是一个游乐场):
input[type=range]::-webkit-slider-thumb {
height: 70px;
width: 70px;
border-radius: 50%;
background-image: url(https://i.pinimg.com/236x/22/58/74/22587435a1a6dae08711cdb64ee7efb3.jpg);
background-position: 00px -10px;
background-size: 200px 300px;
}
我还没有找到background-position
通过JQuery或Vanilla JS更改属性的方法。
这是我设置的小提琴,当前仅切换输入本身的类,该类与期望的结果相去甚远。
我已经为根元素定义了一个变量。然后background-position
根据滑块的值更新了。
const range = document.getElementById('range');
const rangeV = document.getElementById('rangeValue');
const setValue = ()=>{
const newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) );
const newPosition = 35 - (newValue * 0.7);
rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
/* added */
document.documentElement.style.setProperty("--bg-pos-x", `${newValue}px`);
document.documentElement.style.setProperty("--bg-pos-y", `${newValue}px`);
/****/
rangeV.innerHTML = `<span>${range.value}%</span>`;
};
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
/* added */
html {
--bg-pos-x:00px;
--bg-post-y:-10px;
}
/***/
body {
font-family: Arial;
margin: 50px;
}
.range-wrap {
width: 500px;
position: relative;
}
.ticks {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: absolute;
width: 100%;
}
.ticks p {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
width: 1px;
background: #D3D3D3;
height: 10px;
line-height: 40px;
margin: 0 0 20px 0;
}
input[type=range] {
-webkit-appearance: none;
margin: 20px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: #005DFF;
border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
height: 70px;
width: 70px;
border-radius: 50%;
background: white;
border: solid 4px #005DFF;
border-color: #005DFF #005DFF transparent transparent;
border-radius: 100% 100% 100% 100%;
cursor: pointer;
-webkit-appearance: none;
-webkit-transform: translateY(-44%) rotate(-45deg);
transform: translateY(-44%) rotate(-45deg);
}
.range-value {
position: absolute;
top: -50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.range-value span {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
background: #0008d7;
font-size: 18px;
display: block;
position: absolute;
top: 20px;
border-radius: 50%;
pointer-events: none;
z-index: 99;
}
input[type=range]::-webkit-slider-thumb {
height: 70px;
width: 70px;
border-radius: 50%;
background-image: url(https://i.pinimg.com/236x/22/58/74/22587435a1a6dae08711cdb64ee7efb3.jpg);
background-position: var(--bg-pos-x) var(--bg-pos-y);
background-size: 200px 300px;
}
<div class="range-wrap">
<div class="ticks">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="range-value" id="rangeValue"></div>
<input id="range" type="range" min="1" max="10" value="1" step="0.1">
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句