如何使范围滑块的拇指呈大圆形并使其出现在滑块轨道上？

Question

我的代码几乎准备好了，但我有一点被卡住了。 它是一个具有自定义值的范围滑块。 意味着当我们移动它的拇指时，它会显示我们在代码中输入的值。

这就是我想要滑块及其拇指的方式

但这就是到目前为止我能够实现的-结果

这是我在这里使用的代码 - HTML：

<p style='background-color:teal; width:300px; height:250px;'>Number: <output id="ageValue">28</output><br/></br>
<input id="ageSlider" class='range' type="range" min="25" max="30" step="1" value="28" oninput="ageSliderChange(this.value)" onmousemove="ageSliderChange(this.value)" style="width: 200px"></br></br>
Output: <output id="premiumValue">4,565</output><br/>
</p>

CSS：

.range{
-webkit-appearance: none;
 height:10px; 
 width:15px; 
 border-radius:15px; 
 overflow:hidden; 
 outline:none;
}
.range::-webkit-slider-thumb {
-webkit-appearance: none;
background:gray;
width:12px; 
height:12px; 
border-radius:50%;
box-shadow:-407px 0 0 400px #fda62d;
cursor:pointer;
}

Javascript：

function ageSliderChange(ageSlider) {

var age = document.getElementById("ageSlider").value

document.getElementById('ageValue').innerHTML = ageSlider;

    if (age == 25) {
        document.getElementById("premiumValue").innerHTML = '3,740'
        } 
        else if(age == 26){
        document.getElementById("premiumValue").innerHTML = '3,863'
        } 
        else if(age == 27){
        document.getElementById("premiumValue").innerHTML = '4,004'
        }
        else if(age == 28){
        document.getElementById("premiumValue").innerHTML = '4,167'
        } 
        else if(age == 29){
        document.getElementById("premiumValue").innerHTML = '4,353'
        } 
        else if(age == 30){
        document.getElementById("premiumValue").innerHTML = '4,565'
        } 
        else {
        document.getElementById("premiumValue").innerHTML = ''
            }
    }

现在使滑块拇指变大并使其在轨道上看起来像第一张图像中所示的圆形的正确解决方案是什么？ 提前致谢。

Answer 1

您需要添加一个自定义样式元素，您可以使用 JS 代码更改其大小。 我添加了一个更改样式的函数，以便您可以在需要时利用它来动态更改样式。

 var slider = document.getElementById("ageSlider"); var style = document.querySelector('[data="test"]'); setData(50); // set value in this function to make your thumb bigger or smaller. function setData(x) { style.innerHTML = ".range::-webkit-slider-thumb { width: " + x + "px !important; height: " + x + "px !important; }"; } function ageSliderChange(ageSlider) { var age = document.getElementById("ageSlider").value document.getElementById('ageValue').innerHTML = ageSlider; if (age == 25) { document.getElementById("premiumValue").innerHTML = '3,740' } else if (age == 26) { document.getElementById("premiumValue").innerHTML = '3,863' } else if (age == 27) { document.getElementById("premiumValue").innerHTML = '4,004' } else if (age == 28) { document.getElementById("premiumValue").innerHTML = '4,167' } else if (age == 29) { document.getElementById("premiumValue").innerHTML = '4,353' } else if (age == 30) { document.getElementById("premiumValue").innerHTML = '4,565' } else { document.getElementById("premiumValue").innerHTML = '' } }

 .range { margin-top: 40px; -webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; } .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer; }

 <p style='background-color:teal; width:300px; height:250px;'>Number: <output id="ageValue">28</output><br/></br> <!--Add your custom style element here which we will change using JS --> <style data="test" type="text/css"></style> <input id="ageSlider" class='range' type="range" min="25" max="30" step="1" value="28" oninput="ageSliderChange(this.value)" onmousemove="ageSliderChange(this.value)" style="width: 200px"></br> </br> Output: <output id="premiumValue">4,565</output><br/> </p>