HTML DOM Input Range Object

‎شئInput Range ـ كنترل اسلايدر

‎شئInput Range منتسب با يك عنصرHTML ‎<input>‎ ميباشد .با شئ فوق ‎ميتوان عنصرHTML ‎<input>‎ صفحه را بصورت اقدامات شئ گرائي مديريت كرد.

‎بايد عنصر‎<input>‎ مرتبط با شئInput Range داراي ويژگيtype="range ‎"‎ ‎باشد .مقدار پيش فرض ويژگيtype براي عنصر input مقدار ‎"text‎"‎ميباشد . ‎شئInput Range ورودي دريك محدوده را نمايندگي ميكند .

‎كنترل اسلايدري كه ناشي از شئInput Range ويا عنصر‎<input type="range">‎ ‎بوجود مي آيد بصورت پيش فرض اعداد بين‎0-‎100‎ با فاصله يك را داراست .ويژگي هاي min‎،max و step شروع ، پايلن وفاصله قانوني را براي اسلايدر تغيير ميدهد .

‎دسترسي به شئInput Range

‎مثال ـ دسترسي به شئInput Range باid="myRange‎"‎

var x = document.getElementById("myRange");

‎ايجاد شئInput Range

‎با متد‎document.createElement()‎‎ ميتوان شئInput Range را ايجاد نمود .بعبارتي ‎ميتوان عنصر‎<input>‎ را با ويژگيtype="range‎"‎ ايجاد كرد.

‎مثال ـ ايجاد شئInput Range

var x = document.createElement("INPUT");
x.setAttribute("type", "range");

‎ويژگي هايInput Range Object

‎ويژگي	‎شرح
autocomplete	‎مقدار ويژگيautocomplete را تنظيم ويابرگشت ميدهد . ‎ويژگي تكميل خودكار شئInput Range
autofocus	‎ويژگي مشخص ميكند كه آيا عنصر بصورت اتوماتيك در بارگذاري انتخاب شود.
defaultValue	‎مقدار پيش فرض ورودي محدوده راتنظيم ويا برميگرداند.
disabled	‎وضعيت فعال بودن عنصر را تنظيم ويابرگشت ميدهد.
form	‎ويژگيform مشخص ميكند كه ورودي محدوده ، متعلق بكدام عنصرفرم است.
list	‎فهرستي از عنصر‎<datalist>‎ كه شامل ليستي ازاعداد است برگشت ميدهد.
max	‎ماكزيمم مقدار را براي ورودي محدوده‎(slider)‎ مشخص ميكند .
min	‎ويژگي مقدار مينيمم را براي ورودي محدوده‎(slider)‎ مشخص ميكند
name	‎ويژگيname نامي را براي ورودي محدوده مشخص ميكند.
step	‎مقدار ويژگيstep را براي ورودي محدوده مشخص ميكند .
type	‎ويژگيtype نوع عنصر ورودي را مشخص ميكند . type="range‎"‎برايInput Range
value	‎مقدار ويژگيvalue را براي فيلد برگشت ويا تنظيم ميكند.

‎متدهاي شئInput Range

‎جدول متدهاي شئInput Range
‎متد	‎شرح
stepDown()	‎مقدار ويژگيvalue را با عدد مشخصي كاهش ميدهد .
stepUp()	‎مقدار ويژگيvalue را با عدد مشخصي افزايش ميدهد .

‎تشريح بعضي از ويژگي هاي شئInput Range دراين صفحه .مابقي در صفحات مخصوص كه درلينك ‎جدول آمده است ، تشريح ميشوند.

‎ويژگيInput Range step

‎ويژگيInput Range step مقدار ويژگيstep عنصر‎<input>‎مرتبط با شئInput Rangeرا ‎تنظيم ويا برگشت ميدهد .مقدار اين ويژگي فواصل قانوني، كه شئ Input Range‎نمايانگرآن است مشخص ميكند.

‎ويژگيstep فواصل اعداد قانوني را براي يك كنترل اسلايدر مشخص ميكند . براي مثال اگرstep="3‎"‎ ‎باشد، مقادير فيلد ميتوانند‎0,3,6..‎ باشند.

‎ويژگيstep انداز هرحركت ‎)‎ يك افزايس ويا پرش بين مقادير ‎(‎ را براي ‎يك كنترل اسلايدر، مشخص ميكند.

‎نكته ـ ويژگيstep راميتوان همراه ويژگي هاي min و max براي ايجاد طيفي ازمقادير قانوني ‎استفاده كرد.

‎مثال ـ تغيير ويژگيstep كنترل اسلايدر

document.getElementById("myRange").step = "25";

‎فرمت استفاده ـSyntax

‎فرمت برگشت ويژگي
rangeObject.step

‎فرمت تنظيم ويژگي
rangeObject.step=number

‎مقادير ويژگي ـProperty Values

‎مقدار ‎شرح

number ‎فاصله قانوني براي كنترل اسلايدر مشخص ميكند .پيش فرض آن‎1‎است.

‎مثال ـ نمايش مقدار ويژگيstep كنترل اسلايدر

var x = document.getElementById("myRange").step;

<!DOCTYPE html> <html> <body> Points: <input type="range" id="myRange" step="10"> <p>Click the button to display the value of the step attribute of the slider control.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { let x = document.getElementById("myRange").step; document.getElementById("demo").innerHTML = x; } </script> </body> </html>
--(go to editor for change code and run)

‎ويژگيInput Range Value

‎ويژگيInput Range value مقدار ويژگيvalue عنصر‎<input>‎ مرتبط ‎با شئInput Range را ‎تنظيم ويا برگشت ميدهد .اين ويژگي مقدار كنترل اسلايدر را مشخص ميكند، كه شئ Input Range‎نمايانگر آنست.

‎ويژگيvalue مقدار پيش فرض يا مقداري كه كاربر با كنترل اسلايدر انتخاب كرده ويا مقداري از ‎طريق يك اسكريپت تنظيم گرديده مشخص ميكند.

‎مثال ـ تغيير مقدار يك كنترل اسلايدر

document.getElementById("myRange").value = "75";

<!DOCTYPE html> <html> <body> <input type="range" id="myRange"> <p>Click the button to change the value of the slider control.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { document.getElementById("myRange").value = "75"; } </script> </body> </html>
--(go to editor for change code and run)

‎فرمت استفاده ـSyntax

‎فرمت تنظيم ويژگي
rangeObject.value

‎فرمت تنظيم ويژگي
rangeObject.value=number

‎مقادير ويژگي ـProperty Values

‎مقدار ‎شرح

number ‎مقدار كنترل اسلايدر رامشخص ميكند .اگر مشخص نشده باشد پيش فرض آن‎50‎ است .

‎مثال ـ دريافت مقدار كنترل اسلايدر

var x = document.getElementById("myRange").value;

<!DOCTYPE html> <html> <body> Points: <input type="range" id="myRange" value="20"> <p>Click the button to display the value of the value attribute of the slider control.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { let x = document.getElementById("myRange").value; document.getElementById("demo").innerHTML = x; } </script> </body> </html>
--(go to editor for change code and run)

‎مثال ـ نمايش اختلاف مابين ويژگيvalue و defaultvalue

var x = document.getElementById("myRange"); var defaultVal = x.defaultValue; var currentVal = x.value;

<!DOCTYPE html> <html> <body> <p>Slide up or down with the slider control, and then click the button below.</p> Points: <input type="range" id="myRange" value="20"> <p>Note that the default value is not affected when you change the value of the slider.</p> <button type="button" onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { const x = document.getElementById("myRange"); let defaultVal = x.defaultValue; let currentVal = x.value; if (defaultVal == currentVal) { document.getElementById("demo").innerHTML = "Default value and current value is the same: " + x.defaultValue + " and " + x.value + "<br>Slide up or down with the slider control to see the difference!"; } else { document.getElementById("demo").innerHTML = "The default value was: " + defaultVal + "<br>The new, current value is: " + currentVal; } } </script> </body> </html>
--(go to editor for change code and run)

‎شئInput Range از ويژگي ها ورويداد هاي استاندارد پيروي ميكند.

‎صفحات مرتبط

HTML forms

HTML <input> Tag

HTML type Attribute

Previous > <Next

HTML DOM Input Range Object

‎شئInput Range ـ كنترل اسلايدر

‎دسترسي به شئInput Range

--(go to editor for change code and run)

‎ايجاد شئInput Range

--(go to editor for change code and run)

‎ويژگي هايInput Range Object

‎متدهاي شئInput Range

‎ويژگيInput Range step

--(go to editor for change code and run)

‎فرمت استفاده ـSyntax

‎فرمت برگشت ويژگي
rangeObject.step

‎فرمت تنظيم ويژگي
rangeObject.step=number

‎مقادير ويژگي ـProperty Values

--(go to editor for change code and run)

‎ويژگيInput Range Value

--(go to editor for change code and run)

‎فرمت استفاده ـSyntax

‎فرمت تنظيم ويژگي
rangeObject.value

‎فرمت تنظيم ويژگي
rangeObject.value=number

‎مقادير ويژگي ـProperty Values

--(go to editor for change code and run)

--(go to editor for change code and run)

‎صفحات مرتبط

HTML DOM Objectsفهرست =

HTML DOM Input Range Object

‎شئInput Range ـ كنترل اسلايدر

‎دسترسي به شئInput Range

--(go to editor for change code and run)

‎ايجاد شئInput Range

--(go to editor for change code and run)

‎ويژگي هايInput Range Object

‎متدهاي شئInput Range

‎ويژگيInput Range step

--(go to editor for change code and run)

‎فرمت استفاده ـSyntax

‎فرمت برگشت ويژگي rangeObject.step

‎فرمت تنظيم ويژگي rangeObject.step=number

‎مقادير ويژگي ـProperty Values

--(go to editor for change code and run)

‎ويژگيInput Range Value

--(go to editor for change code and run)

‎فرمت استفاده ـSyntax

‎فرمت تنظيم ويژگي rangeObject.value

‎فرمت تنظيم ويژگي rangeObject.value=number

‎مقادير ويژگي ـProperty Values

--(go to editor for change code and run)

--(go to editor for change code and run)

‎صفحات مرتبط

HTML DOM Objectsفهرست =

‎فرمت برگشت ويژگي
rangeObject.step

‎فرمت تنظيم ويژگي
rangeObject.step=number

‎فرمت تنظيم ويژگي
rangeObject.value

‎فرمت تنظيم ويژگي
rangeObject.value=number