如何在javascript中旋轉輸入類型范圍拇指？

Question

我有一個<input type="range">並想要旋轉拇指 - 但只有拇指輸入。

我的問題是：當我嘗試旋轉它時，它會旋轉整個滑塊。

有人能幫我嗎？

 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> 

Answer 1

由於您無法使用JS來定位偽元素，因此請考慮使用CSS變量。 你在input元素中定義它們，它們由拇指繼承 ; 因此，您可以輕松實現您想要的。

 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; 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: linear-gradient(red 50%,blue 0); cursor: pointer; display:inline-block; transform:rotate(var(--r,180deg)); } 

 <div class="slidecontainer"> <input type="range" min="0" max="360" value="180" class="slider" oninput="slide(event)"> </div>