| 属性 | 描述 |
| max | 设置或返回滑块控件最大值 |
| min | 设置或返回滑块控件最小值 |
| step | 设置或返回每次拖动滑块控件时的递增量 |
| value | 设置或返回滑块控件的value值 |
| defaultValue | 设置或返回滑块控件的默认值 |
| autofocus | 设置或返回滑块控件在页面加载后是否应自动获取焦点 |
先看谷歌浏览器:
览器
用法很简单，如下所示：
<input type="range" value="0">
火狐浏览器：
除了火狐的样式需要另外重写一套css，其他的基本不用。
/* 火狐 内背景色 */
input[type=range]::-moz-range-track {
height: 4px;
background: rgb(229, 229, 229);
}
/* 火狐 外背景色 */
input[type=range]::-moz-range-progress {
background: #767676;
height: 4px;
border-radius: 10px;
}全部代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 下面这段CSS代码定义了range控件的样式 -->
<style>
/* 隐藏range控件默认样式 */
[type="range"] {
-webkit-appearance: none;
appearance: none;
margin: 0;
outline: 0;
background-color: transparent;
width: 500px;
border-radius: 10px;
}
/* 火狐 内背景色 */
input[type=range]::-moz-range-track {
height: 4px;
background: rgb(229, 229, 229);
}
/* 火狐 外背景色 */
input[type=range]::-moz-range-progress {
background: #767676;
height: 4px;
border-radius: 10px;
}
/* 定义range控件轨道的样式 */
[type="range"]::-webkit-slider-runnable-track {
height: 4px;
background: rgb(229, 229, 229);
}
/* 定义range控件容器的样式 */
[type="range" i]::-webkit-slider-container {
height: 20px;
overflow: hidden;
}
/* 定义range控件拇指的样式 */
[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #767676 !important;
border: 1px solid transparent;
margin-top: -8px;
/* 使用border-image属性给拇指添加渐变边框 */
border-image: linear-gradient(#767676, #767676) 0 fill / 8 20 8 0 / 0px 0px 0 2000px;
}
</style>
</head>
<body>
<!-- 在页面上添加一个range控件-->
<input type="range" min="0" max="100" value="50">
</body>
</html>
