HTML DOM Input Range object-HTML Tutorial-php.cn

HTML DOM Input Range object

王林

Release： 2023-08-28 16:01:09

forward

1526 people have browsed it

HTML DOM input range object is associated with an element of type "range". We can use the createElement() and getElementById() methods to create and access input elements of type range respectively.

Properties

The following are the properties of the Input range object:

	Properties and description
1	autocomplete Set or return the autocomplete property value of the range control.
2	autofocus Sets or returns whether the range slider control is automatic when the page loads Get focus.
3	defaultValue Sets or returns the default value of the range slider control.
4	disabled Sets or returns whether the slider control is disabled.
5	form Returns a reference to the form that contains the slider control.
6	List Returns a reference to the data list that contains the slider control.
7	Max Set or return the maximum property value of the slider control.
8	Min Sets or returns the minimum property value of the slider control.
9	#Name Sets or returns the name property value of the slider control.
10	Step Set or return the step property value of the slider control.
11	Type Returns the form element type of the slider control.
12	value Set or return the value property value of the slider control.

Methods

The following are the methods of the password object:

##12

Serial number	Method and description
	stepDown() Decrements the slider control's value by the given number.
	stepUp()Increments the slider control by the given number value.

Serial number

Method and description

stepDown() Decrements the slider control's value by the given number.

stepUp()Increments the slider control by the given number value.

Example

Let’s see an example of an Input range object:

Demonstration

<!DOCTYPE html>
<html>
<head>
<script>
   function rangeCreate() {
      var R = document.createElement("INPUT");
      R.setAttribute("type", "range");
      document.body.appendChild(R);
}
</script>
</head>
<body>
<h1>Input range object</h1>
<p>Create an input field with type range by clicking the below button</p>
<button onclick="rangeCreate()">CREATE</button>
<br><br>
VOLUME:
</body>
</html>

Copy after login

Output

This will produce the following output−

HTML DOM Input Range对象

Click the CREATE button−

HTML DOM Input Range对象

in In the above example −

we created a button named CREATE, which will execute the rangeCreate() method when the user clicks it −

<button onclick="rangeCreate()">CREATE</button>

Copy after login

rangeCreate() method uses the createElement() of the document object Method creates an

element by passing "INPUT" as parameter. The newly created input element is assigned to the variable R and a type attribute with a value range is created using the setAttribute() method.

Remember, setAttribute() creates the attribute and then assigns the value if the attribute does not exist. Didn't exist before. Finally, using the appendChild() method on the document body, we append the input elements of the type range as child elements of the body -

function createPASS() {
   var R = document.createElement("INPUT");
   R.setAttribute("type", "range");
   document.body.appendChild(R);
}

Copy after login

The above is the detailed content of HTML DOM Input Range object. For more information, please follow other related articles on the PHP Chinese website!