Hi makenzi.exc,
Use the input type range and set the min, max and value property.
It allows the user specify a numeric value which must be not less than a given value and not more than another given value to be select.
min - The default is 0. It specifies the maximum value allowed.
max - The default is 100. It specifies the minimum value allowed.
step - The default is 1. It specifies the legal number intervals.
Value - It specifies the default value.
Refer below example.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
</style>
</head>
<body>
<div style="width:100%">
<input id="txtRange" type="range" min="1" max="100" value="65"
oninput="GetValue()" style="width:98%" />
</div>
<span id="lblValue"></span>
<script type="text/javascript">
window.onload = function () {
GetValue();
};
function GetValue() {
document.getElementById("lblValue").innerHTML =
document.getElementById("txtRange").value;
}
</script>
</body>
</html>
Demo
Screenshot
Downloads
Download Sample
