HTML5 input类型 range滑动条介绍与使用

最新推荐文章于 2024-09-06 11:32:37 发布

微笑丶1998

最新推荐文章于 2024-09-06 11:32:37 发布

阅读量9.8k

点赞数 10

分类专栏：网页前端文章标签： html5 滑动条

本文链接：https://blog.csdn.net/j84491135/article/details/89054082

版权

网页前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

简介

range滑动条是HTML5新增的input类型，用于简单的滑动。

使用

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Range滑动条使用</title>
		<script type="text/javascript">
			function show(){
				ran = document.getElementById("ran");
				num = document.getElementById("num");
				num.value = ran.value;
			}
		</script>
	</head>
	<body>
		数字滑动条：<input type="range" id="ran" min="0" max="100" step="1" value="0" onchange="show()"/> <br>
		数值显示：<input type="text" id="num"/> <br>
	</body>
</html>