在我们日常开发的过程的滑动是一个常见的小组件,很多UI框架里面也都有,今天我给大家分享一波使用 原生的input 类型为range 做一个自定义类型的滑块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#range {
margin: 200px;
width: 80%;
height: 20px;
}
</style>
</head>
<body>
<input type="range" id="range" min="1" max="10" step="1" value="4">
</body>
</html>
我们使用原生的input生成的就是如上图所示的滑块,但是我们产品是这个滑块太丑了,能不能高一个好看的。
身为 牛马
的程序猿只能 安排。
- 第一步 清楚滑块的默认样式,设置圆角,添加新的背景
<style>
#range {
margin: 200px;
width: 80%;
height: 20px;
appearance: none;
-webkit-appearance: none; /* 覆盖默认外观,适用于 WebKit 浏览器 */
-moz-appearance: none; /* 覆盖默认外观,适用于 Firefox 浏览器 */
-ms-appearance: none; /* 覆盖默认外观,适用于 IE/Edge 浏览器 */
margin: 0; /* 移除边距 */
outline: none;
border: none;
background-color: aqua;
border-radius: 15px;
}
</style>
他就变成了这个样子,还是很丑
2.第二步改变滑块,如何选择滑块的小圆点
#range::-webkit-slider-thumb {
-webkit-appearance: none; /* 覆盖默认外观 */
width: 100px; /* 滑块宽度 */
height: 10px; /* 滑块高度 */
background-color: deeppink; /* 滑块颜色 */
border-radius: 10px;
/* margin-top: -10px; */
cursor: pointer; /* 鼠标样式 */
transition: box-shadow 0.15s ease-in-out; /* 动画效果 */
}
最后他就长 这个“”熊的样子“”
最后完整的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#range {
margin: 200px;
width: 80%;
height: 20px;
appearance: none;
-webkit-appearance: none;
/* 覆盖默认外观,适用于 WebKit 浏览器 */
-moz-appearance: none;
/* 覆盖默认外观,适用于 Firefox 浏览器 */
-ms-appearance: none;
/* 覆盖默认外观,适用于 IE/Edge 浏览器 */
outline: none;
border: none;
background-color: aqua;
border-radius: 15px;
}
#range::-webkit-slider-thumb {
-webkit-appearance: none;
/* 覆盖默认外观 */
width: 100px;
/* 滑块宽度 */
height: 10px;
/* 滑块高度 */
background-color: deeppink;
/* 滑块颜色 */
border-radius: 10px;
/* margin-top: -10px; */
cursor: pointer;
/* 鼠标样式 */
transition: box-shadow 0.15s ease-in-out;
/* 动画效果 */
}
#range::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 10px rgba(0, 123, 255, 0.5);
/* 滑块hover效果 */
}
#range::-webkit-slider-runnable-track {
width: 100%;
/* 轨道宽度 */
height: 8.4px;
/* 轨道高度 */
background-color: #06c575;
/* 轨道颜色 */
border-radius: 4.2px;
/* 圆角 */
}
</style>
</head>
<body>
<input type="range" id="range" min="1" max="100" step="0.01" value="4">
</body>
</html>