如何旋转输入类型范围拇指在JavaScript中? [英] How to rotate input type range thumb in javascript?
本文介绍了如何旋转输入类型范围拇指在JavaScript中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个< input type =range>
并且想要旋转拇指 - 但只有输入的拇指。
我的问题是:当我尝试旋转它时,它会旋转整个滑块。
有人可以帮我吗?
function slide(event){event.target.style.webkitTransform ='rotate(20deg)' ;}
.slidecontainer {width:100%; } .slider {-webkit-appearance:none;外观:无;宽度:100%; height:20px;背景:#d3d3d3;概要:无;不透明度:0.7; -webkit-transition:.2s;过渡:不透明.2s; border-radius:20px; } .slider:hover {opacity:1; } .slider :: - webkit-slider-thumb {-webkit-appearance:none;外观:无;宽度:50px; height:50px; border-radius:50px;背景:灰色; background-image:url(img / thumb.png); background-size:35px 35px; background-position:center;背景重复:不重复;光标:指针; } .slider :: - moz-range-thumb {width:50px; height:50px; border-radius:50px;背景:灰色; background-image:url(img / thumb.png); background-size:35px 35px; background-position:center;背景重复:不重复;光标:指针; }
< div class =slidecontainer> < / div>
< input type =rangemin =100max =500value =300class =slideroninput = 解决方案
既然你不能使用JS来定位伪元素,考虑使用CSS变量。您可以在输入元素中定义它们,并且它们由拇指继承;因此您可以轻松实现您想要的功能。
function slide(event){ event.target.style.setProperty(' - r',event.target.value +'deg');}
.slidecontainer {width:100%;}。slider {-webkit-appearance:none;外观:无;宽度:100%; height:20px;背景:#d3d3d3;概要:无;不透明度:0.7; -webkit-transition:.2s;过渡:不透明.2s; border-radius:20px;}。slider:hover {opacity:1;}。slider :: - webkit-slider-thumb {-webkit-appearance:none;外观:无;宽度:50px; height:50px; border-radius:50px;背景:线性渐变(红色50%,蓝色0);光标:指针;显示:内联块; transform:rotate(var( - r,180deg));}。slider :: - moz-range-thumb {width:50px; height:50px; border-radius:50px;背景:灰色; background-image:url(img / thumb.png); background-size:35px 35px; background-position:center;背景重复:不重复; cursor:pointer;}
< div class =slidecontainer > < / div>
< input type =rangemin =0max =360value =180class =slideroninput =
I have an <input type="range">
and want to rotate the thumb - but only the thumb on input.
My problem is: When i try to rotate it, it rotates the whole slider.
Can someone help me?
function slide(event){
event.target.style.webkitTransform = 'rotate(20deg)';
}
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 20px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
border-radius: 20px;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 50px;
height: 50px;
border-radius: 50px;
background: grey;
background-image: url(img/thumb.png);
background-size: 35px 35px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 50px;
height: 50px;
border-radius: 50px;
background: grey;
background-image: url(img/thumb.png);
background-size: 35px 35px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
<div class="slidecontainer">
<input type="range" min="100" max="500" value="300" class="slider" oninput="slide(event)">
</div>
解决方案
Since you cannot target pseudo-element using JS, consider using CSS variable. You define them within the input element and they are inherited by the thumb; thus you can easily achieve what you want.
function slide(event) {
event.target.style.setProperty('--r',event.target.value+'deg');
}
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 20px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
border-radius: 20px;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 50px;
height: 50px;
border-radius: 50px;
background:linear-gradient(red 50%,blue 0);
cursor: pointer;
display:inline-block;
transform:rotate(var(--r,180deg));
}
.slider::-moz-range-thumb {
width: 50px;
height: 50px;
border-radius: 50px;
background: grey;
background-image: url(img/thumb.png);
background-size: 35px 35px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
<div class="slidecontainer">
<input type="range" min="0" max="360" value="180" class="slider" oninput="slide(event)">
</div>
这篇关于如何旋转输入类型范围拇指在JavaScript中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文