如何在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>