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

Question

Im using a range input slider for a site I'm making and need to increase the border radius of the slider thumb as you slide it, so from (0% to 50%).我正在为我正在制作的网站使用范围输入滑块，并且需要在滑动滑块时增加滑块的边框半径，因此从（0% 到 50%）。

I've looked at similar issues online but couldn't manage to solve it.我在网上看过类似的问题，但无法解决。

here is my code:这是我的代码：

<!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,255,.1);
}

Thanks for you help.谢谢你的帮助。

Answer 1

You can change the border-radius of an element using JS.您可以使用 JS 更改元素的边框半径。

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

For the JS, and For the HTML,对于 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>

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

问题描述

1 个解决方案

解决方案1
0

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

问题描述

1 个解决方案

解决方案1 0

解决方案1
0