Как изменить радиус границы ползунка ввода диапазона на значение?

Я использую ползунок ввода диапазона для сайта, который я создаю, и мне нужно увеличить радиус границы ползунка при его перемещении, то есть от (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,255,.1);
}

Спасибо за помощь.


javascript html css rangeslider
person awg22    schedule 01.11.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете изменить радиус границы элемента с помощью 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>
person Community    schedule 01.11.2020
comment
Привет, я пытался использовать твой код, но он не работает. Я продолжаю получать сообщение об ошибке, в котором говорится, что myFunction не определена. - person awg22; 02.11.2020