如何更改范围输入滑块的边框半径值？

问题描述

我正在为正在制作的网站使用范围输入滑块，因此在滑动时需要增加滑块的边框半径，因此从（0％到50％）。

我在线上已经看过类似的问题，但无法解决。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    
  </head>  
  <body>
       
    <div class="slideContainer">
      <input type="range" id="slider" class="slider" min="0" max="50" value="0">
    </div>

  </body>
</html>

.slideContainer{
  position: fixed; 
  top: 25%;
  right: -327px;
  z-index: 100;
  transform-origin: top left;
  transform: rotate(90deg);
  /*transform: translate(-50%,-50%) rotate(-90deg);*/
  display: flex;
  
}

.slideContainer .slider {
  width: 50vh;
  -webkit-appearance: none;
  height: 1.5vw;
  position: relative;
  background-color: #7A1E76;
  outline: none;
  border-radius: 3vw;
}

.slideContainer .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #A5379B;
  Box-shadow: 0 0 0.75vw black;
  height: 2vw;
  width: 2vw;
  border-radius: 0%;
  cursor: pointer;
  transition: .5s eas-in-out;
}

.slideContainer .slider::-webkit-slider-thumb:hover {
  background-color: pink;
}

.slideContainer .slider::-webkit-slider-thumb:active {
  Box-shadow: 0 0 0 20px rgb(255,255,.1);
}

感谢您的帮助。

解决方法

您可以使用JS更改元素的边界半径。

var slider = document.querySelector("#slider");
myFunction = function(){
    console.log(slider.value + "vw")
    slider.style.borderRadius  = slider.value + "vw";
}

对于JS和HTML，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    
  </head>  
  <body>
       
    <div class="slideContainer">
      <input type="range" id="slider" onchange="myFunction()" style="border-radius: 3vw;" class="slider" min="0" max="50" value="0">
    </div>

  </body>
</html>

html javascript rangeslider

如何更改范围输入滑块的边框半径值？

问题描述

解决方法

相关问答