Как написать функцию, которая изменяет размер большого пальца в зависимости от значения ползунка? ⇐ CSS

[Anonymous]

Я новичок в JavaScript, поэтому возился и учился использовать функции. Я пытаюсь использовать setInterval, чтобы создать функцию, которая постоянно меняет размер ползунка в зависимости от значения ползунка.
Я пытался использовать getElementById и другие вещи, и я могу' Не могу понять.
Вот HTML:

Код: Выделить всё

0

Вот CSS (слайдер настраивается):

Код: Выделить всё

.javaRange {
-webkit-appearance: none;
background-color: #cdfffe;
height: 20px;
overflow: visible;
width: 400px;
border-radius: 50px;
}

.javaRange::-webkit-slider-thumb {
-webkit-appearance: none;
background: #00918f;
border-radius: 50%;
cursor: pointer;
height: 20px;
width: 20px;
border: 0;
}

а вот JavaScript, который у меня есть на данный момент:

Код: Выделить всё

const constant = 0.12;
const thumbValue = document.getElementById("rangeInput2").value;
function thumbSize(){
document.getElementById("rangeInput2").style.width = 20 + parseInt(thumbValue) + "px";
document.getElementById("rangeInput2").style.height = 20 + parseInt(thumbValue) + "px";
};
setInterval(thumbSize());

Я много чего пробовал. пожалуйста, помогите!
РЕДАКТИРОВАТЬ:
Я только что получил ответ, который действительно помог, но поднял еще один вопрос. Могу ли я указать конкретный размер большого пальца? Вот строка кода, которую я использую:

Код: Выделить всё

document.getElementById("rangeInput2").style.width = 20 + parseInt(thumbValue) + "px";

Это сработало, за исключением того, что менялся размер всего ползунка, а мне хотелось изменить только размер ползунка.

Подробнее здесь: https://stackoverflow.com/questions/791 ... ider-value