HTML控件input类别为range时<input type="range">介绍
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
<input type="range">
Because this kind of widget is imprecise, it should only be used if the control's exact value isn't important. Try itIf the user's browser doesn't support type ValidationThere is no pattern validation available; however, the following forms of automatic validation are performed:
ValueThe JS defaultValue = rangeElem.max < rangeElem.min ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min) / 2; If an attempt is made to set the value lower than the minimum, it is set to the minimum. Similarly, an attempt to set the value higher than the maximum results in it being set to the maximum. Additional attributesIn addition to the attributes shared by all listThe value of the See the adding tick marks below for an example of how the options on a range are denoted in supported browsers. maxThe greatest value in the range of permitted values. If the This value must be greater than or equal to the value of the minThe lowest value in the range of permitted values. If the This value must be less than or equal to the value of the Note: If the stepThe The Note: When the value entered by a user doesn't adhere to the stepping configuration, the user agent may round off the value to the nearest valid value, preferring to round numbers up when there are two equally close options. The default stepping value for Non-standard AttributesorientSimilar to the -moz-orient non-standard CSS property impacting the Note: The following input attributes do not apply to the input range: ExamplesWhile the A few examples of situations in which range inputs are commonly used:
As a rule, if the user is more likely to be interested in the percentage of the distance between minimum and maximum values than the actual number itself, a range input is a great candidate. For example, in the case of a home stereo volume control, users typically think "set volume at halfway to maximum" instead of "set volume to 0.5". Specifying the minimum and maximumBy default, the minimum is 0 and the maximum is 100. If that's not what you want, you can easily specify different bounds by changing the values of the For example, to ask the user for a value between -10 and 10, you can use: HTML <input type="range" min="-10" max="10" /> Setting the value's granularityBy default, the granularity is 1, meaning the value is always an integer. To control the granularity, you can change the Setting the step attributeHTML <input type="range" min="5" max="10" step="0.5" /> Setting step to "any"If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of HTMLHTML <input id="pi_input" type="range" min="0" max="3.14" step="any" /><p>Value: <output id="value"></output></p> JAVAscriptJS const value = document.queryselector("#value");const input = document.queryselector("#pi_input");value.textContent = input.value;input.addEventListener("input", (event) => { value.textContent = event.target.value;}); This example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected. Javascript is used to show how the value changes as the user interacts with the range. Adding tick marksTo add tick marks to a range control, include the HTMLHTML <label for="temp">Choose a comfortable temperature:</label><br /><input type="range" id="temp" name="temp" list="markers" /><datalist id="markers"> <option value="0"></option> <option value="25"></option> <option value="50"></option> <option value="75"></option> <option value="100"></option></datalist> ResultUsing the same datalist for multiple range controlsTo help you from repeating code you can reuse that same Note: If you also want to show the labels as in the example below then you would need a HTMLHTML <p> <label for="temp1">Temperature for room 1:</label> <input type="range" id="temp1" name="temp1" list="values" /></p> ResultAdding labelsYou can label tick marks by giving the HTMLHTML <label for="tempB">Choose a comfortable temperature:</label><br /><input type="range" id="tempB" name="temp" list="values" /><datalist id="values"> <option value="0" label="very cold!"></option> <option value="25" label="cool"></option> <option value="50" label="medium"></option> <option value="75" label="getting warm!"></option> <option value="100" label="hot!"></option></datalist> CSSCSS datalist { display: flex; flex-direction: column; justify-content: space-between; writing-mode: vertical-lr; width: 200px;}option { padding: 0;}input[type="range"] { width: 200px; margin: 0;} ResultCreating vertical range controlsBy default, browsers render range inputs as sliders with the knob sliding left and right. To create a vertical range, wherein the knob slides up and down, set the CSS Horizontal range controlConsider this range control: HTML <input type="range" id="volume" min="0" max="11" value="7" step="1" /> This control is horizontal (at least on most if not all major browsers; others might vary). Using the appearance propertyThe We use the same HTML as in the previous examples: HTML <input type="range" min="0" max="11" value="7" step="1" /> We target just the inputs with a type of range: CSS input[type="range"] { appearance: slider-vertical;} Using the orient attributeIn Firefox only, there is a non-standard Use similar HTML as in the previous examples, we add the attribute with a value of HTML <input type="range" min="0" max="11" value="7" step="1" orient="vertical" /> writing-mode: bt-lrThe We use the same HTML as in the previous examples: HTML <input type="range" min="0" max="11" value="7" step="1" /> We target just the inputs with a type of range, changing the writing mode from the default to CSS input[type="range"] { writing-mode: bt-lr;} Putting it all togetherAs each of the above examples works in different browsers, you can put all of them in a single example to make it work cross browser: We keep the HTML <input type="range" min="0" max="11" value="7" step="1" orient="vertical" /> We target just the CSS input[type="range"][orient="vertical"] { writing-mode: bt-lr; appearance: slider-vertical;} Technical summary
Specifications
Browser compatibilityReport problems with this compatibility data on GitHub
LegendTip: you can click/tap on a cell for more information.
See also来源:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range 该文章在 2023/8/24 23:01:49 编辑过 |
关键字查询
相关文章
|