如何使用 HTML 5 输入类型范围？答案

【问题标题】：How to work with HTML 5 input type range?如何使用 HTML 5 输入类型范围？
【发布时间】：2019-07-31 11:42:49
【问题描述】：

如何在html中使用范围输入类型改变字体大小？

<input type="range" name="points" min="1" max="10">

我想要这样，当我拖动滑块时，字体大小应该根据滑块范围的值而变化。

【问题讨论】：

如果您希望我们修复它，请向我们展示我们的代码。或者问一个更精确的问题。

标签： javascript html

【解决方案1】：

这个非常简单。您可以在输入上使用oninput="myFunction()" 属性。或在您的 javascript 中添加 addEventListener("input",myFunction)。这应该使它能够活下去。

如果这不是您要查找的内容，则可以在其上使用 for 循环并使用 getElementsByTagName("*")

这是另一个例子，你也可以使用 onchange，但我选择使用 oninput。

function myFunction(){
	var para = document.getElementsByTagName("p");
    var input = document.getElementById("ranger");
    for (var i = 0; i < para.length; i++){
    	para[i].style.fontSize = input.value + "px";
    }
}

p {
  font-size: 50px;
}

<div>You can also use the onchange attribute to set it when it just changes. Using oninput executes when user gives input</div>
<input type="range" id="ranger" value="50" oninput="myFunction()">
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>

这是一个使用 onchange 属性的示例
JSFiddle

【讨论】：

【解决方案2】：

在滑块发生更改事件时，按值相应地更改大小：

<input type="range" name="points" min="1" max="10" id="MySlider">

$("#MySlider").change(function() {
    $("#MyText").css("font-size", $("#MySlider").value); 
  });

【讨论】：