[英]How to make a range slider's thumb in big circular shape and make it appear over the slider track?
我的代碼幾乎准備好了,但我有一點被卡住了。 它是一個具有自定義值的范圍滑塊。 意味着當我們移動它的拇指時,它會顯示我們在代碼中輸入的值。
但這就是到目前為止我能夠實現的-結果
這是我在這里使用的代碼 - 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 = ''
}
}
現在使滑塊拇指變大並使其在軌道上看起來像第一張圖像中所示的圓形的正確解決方案是什么? 提前致謝。
您需要添加一個自定義樣式元素,您可以使用 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.