HTML input type='range' slider tutorial

input type="range" is an HTML form control used to create slider. 1. It allows users to select values ​​between the specified minimum and maximum values. The current value is not displayed by default. It needs to be displayed dynamically through JavaScript or other elements (such as span); 2. The basic attributes include min, max, value and step, which can set the range, initial value and step respectively, and support integer or decimal precision; 3. To display the current value, you need to update the page content in real time with DOM events (such as input events); 4. You can customize the style through CSS, especially for pseudo-elements such as::-webkit-slider-thumb, etc. for WebKit browsers; 5. Actual applications include volume adjustment, scoring system, image parameter adjustment and other scenarios. It is recommended to cooperate with JavaScript with JavaScript. Verify the input values ​​to ensure security and consistency, and ultimately improve the interactive effect of the user experience has been completed.

HTML input type="range" is a form control that allows users to select values ​​through the slider. It is very suitable for scenes such as volume adjustment, rating, brightness settings, etc. where values ​​need to be selected within a certain range. Below is a practical range input type tutorial to help you quickly master its basic usage and common tips.

What is input type="range"?

Create a slider that allows the user to select a value between the specified minimum and maximum value. It does not display the current value (by default), so it usually needs to be displayed with JavaScript or other elements.

Basic syntax:

 <input type="range" min="0" max="100" value="50">

• min : Minimum value (default is 0)
• max : Maximum value (default is 100)
• value : initial value (default is the intermediate value of min and max )
• step : step size (default is 1, can be set to 0.1 for decimals)

How to display the current value of the slider?

Since the range input box itself does not display numeric values, we usually use another element (such as <span> or <output> ) to dynamically display the current value.

Sample code:

 <label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50" step="1">
<span id="valueDisplay">50</span>

JavaScript updates values ​​in real time:

 const slider = document.getElementById('volume');
const display = document.getElementById('valueDisplay');

slider.addEventListener('input', function() {
  display.textContent = this.value;
});

This way, when the user drags the slider, the numbers next to it will be updated in real time.

Common uses and optimization techniques

1. Control step size (step)

If you want the user to select only integers or values ​​of a specific interval, use step property:

 <!-- Only even numbers can be selected-->
<input type="range" min="0" max="10" value="0" step="2">

<!-- Support for decimals-->
<input type="range" min="0" max="1" value="0.5" step="0.01">

2. Beautify with CSS style

Native slider styles may be inconsistent across browsers, and you can use CSS to customize the appearance (especially WebKit kernel browser):

 input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #ddd;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #007bff;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #007bff;
  cursor: pointer;
  border: none;
}

Note: The CSS custom slider style has different support levels in different browsers. It is recommended to test mainstream browsers (Chrome, Firefox, Safari).

3. Limit the input range and verify

Although users can only slide between min and max, it is still recommended to verify values ​​in JavaScript, especially when values ​​come from other input methods.

 function getValidValue(value) {
  return Math.min(Math.max(value, 0), 100); // Limit to 0~100
}

Examples of practical application scenarios

• Volume/Brightness Control : Intuitive dragging operation
• Rating system : Let users slide between 1~5 stars to choose
• Filter intensity adjustment : image processing parameters such as blur, contrast, etc.
• Budget selection in the form : Select price range

Basically that's it. input type="range" is simple to use, and can achieve rich interactive effects by combining JavaScript and CSS. The key is to remember to display the current value and adjust the step and style as needed to improve the user experience.

The above is the detailed content of HTML input type='range' slider tutorial. For more information, please follow other related articles on the PHP Chinese website!