如何在HTML中使用range输入类型？

HTML表单用于通过各种方式或方法获取用户的输入。许多控件有助于创建用户界面。要获取单个输入，我们使用文本框，可以使用<input type="text" name="t1">创建。此代码将显示如下控件：

在此控件中，我们可以键入精确的值，这些值稍后可以在数据库中进行验证或保存。但有时我们需要一个控件来获取用户信息或他的兴趣选择，而无法输入精确的信息。例如，在社交媒体网站上，会要求人们输入他们的满意度级别，在这种情况下，只能指定一个范围，而不是确切的值。另一个例子可能是提供价格范围选项，访问者不输入具体的金额，而是提及价格范围。

因此，在这种情况下，普通的文本框将无用武之地。我们将使用范围类型的输入控件，允许用户在一个范围内选择值。

范围控件是一个滑块控件，通过移动圆圈，可以选择范围。此控件不用于输入精确值，而是在不需要精确值的情况下使用。让我们来看一个非常基本的范围控件程序。

示例


<html>
<body>
   <form name="form1">
      <label>Select Weight</label></br>
      <input type="range" name="weight">
   </form>
</body>
</html>

此控件的默认范围是从0到100。但是我们也可以设置最小值和最大值。要设置最小值和最大值，我们可以使用min和max属性。

示例


<html>
<body>
  <form name="form1">
      <label>Select Weight</label><br>
      <input type="range" name="weight" min="10" max="200">
   </form>
</body>
</html>

在此程序中，在移动滑块时，您将看不到最小值和最大值。

除了min和max之外，还有其他非常有用的属性。它们如下：

step - step值表示间隔值。默认情况下，滑块控件的step值为1。如果希望滑块一次移动5步，则需要将step值指定为5。
value - 这是滑块在网页中启动的初始值。

因此，让我们对之前的程序进行一些更改，并实现step和value属性，并显示滑块值。

示例


<html>
<body>
   <form oninput="res.value = slider1.value">
      <label>Select Weight</label><br>
      <input type="range" name="slider1" min="10" max="200" step="10"  
      value="30"> <br/>
             
      <output name="res" for="slider1">30</output>
   </form>
</body>
</html>