前言
input
滑块默认是水平方向显示的,如何竖直显示,有 2 种方式:
方式一
旋转 input
滑块自身,您可以点击这里,input滑块旋转自身
<!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>input滑块旋转自身</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
.content_wrap{
padding: 100px 10px;
box-sizing: border-box;
}
input{
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div class="content_wrap">
<input type="range" name="" id="">
</div>
</body>
</html>
方式二
旋转 input
滑块的父元素,您可以点击这里,input滑块旋转父元素
<!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>input滑块旋转父元素</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
.content_wrap{
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div class="content_wrap">
<input type="range" name="" id="">
</div>
</body>
</html>
咋一看上去,2种方式在 PC 端都没问题,但是,当切换到移动端时,方式二滑动很“吃力”。
总结
- input滑块竖直显示,旋转滑块自身即可,移动端和PC端都能流畅的滑动