Question

我的代码快要准备好了，但是我一at不振。它是带有自定义值的范围滑块。意味着当我们移动它的拇指时，它将显示我们在代码中输入的值。

但这是到目前为止我能实现的-result

这是我在这里使用的代码- 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>

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

1 个答案: