Range

The <input> element with type="range" creates an input control that allows users to select a numeric value within a specified range by sliding a thumb control along a track.

<input type="range" class="form-range" id="customRange1" />

Explanation:

1. type="range": Specifies that the input should be rendered as a range slider.

2. class="form-range": Bootstrap class that styles the range input to match the Bootstrap form styles.

3. id="customRange1": Unique identifier for the input, used for associating the <label> element with the input control.

4. label element: Provides a text description for the range input. The for attribute of the <label> element should match the id attribute of the <input> element to associate them correctly.

Additional Notes:

• Attributes: You can use various attributes with <input type="range"> such as min, max, step, and value to define the range of values, increment step, and default value, respectively.

• JavaScript: You can use JavaScript to handle events like input or change to track changes made by users to the range input and perform actions based on those changes.

• Accessibility: Ensure that the range input is accessible by associating it with a <label> and providing meaningful text that describes its purpose.