正文

HTML5垂直范围滑块示例代码

/0 浏览量
0731

在HTML5中，我们可以使用<input type="range">元素来创建一个范围滑块。为了使滑块垂直排列，我们可以使用CSS来调整其样式。以下是一个简单的示例，展示了如何创建一个垂直范围滑块。

HTML 结构

首先，我们需要定义滑块的位置和基本属性。以下是一个HTML示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 垂直范围滑块示例</title>
<style>
  /* 在这里添加CSS样式 */
</style>
</head>
<body>

<div class="slider-container">
  <input type="range" id="verticalSlider" min="0" max="100" value="50" orient="vertical">
  <span id="sliderValue">50</span>
</div>

<script>
  // 在这里添加JavaScript代码（如果需要）
</script>

</body>
</html>

CSS 样式

接下来，我们添加CSS样式来使滑块垂直排列，并设置一些基本的外观：

.slider-container {
  position: relative;
  height: 200px; /* 设置滑块容器的高度 */
  width: 20px; /* 设置滑块容器的宽度 */
  margin: 20px;
  overflow: hidden; /* 防止滑块超出容器 */
}

/* 设置滑块样式 */
#verticalSlider {
  -webkit-appearance: none; /* 隐藏默认样式 */
  width: 100%; /* 容器宽度 */
  height: 100%; /* 容器高度 */
  background: #ddd; /* 背景颜色 */
  outline: none; /* 去除焦点时的轮廓 */
  opacity: 0.7; /* 透明度 */
  -webkit-transition: .2s; /* 平滑过渡 */
  transition: opacity .2s;
}

/* 鼠标悬停时改变滑块的颜色 */
#verticalSlider:hover {
  opacity: 1;
}

/* 设置滑块的轨道 */
#verticalSlider::-webkit-slider-runnable-track {
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #555; /* 轨道颜色 */
}

/* 设置滑块的滑块头 */
#verticalSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -20px; /* 设置滑块头距离轨道顶部的距离 */
  width: 20px;
  height: 20px;
  background: #fff; /* 滑块头颜色 */
  cursor: pointer;
}

/* 设置滑块的滑块头在鼠标悬停时的样式 */
#verticalSlider::-webkit-slider-thumb:hover {
  background: #ccc;
}

/* 其他浏览器的滑块头样式 */
#verticalSlider::-moz-range-track {
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #555;
}

#verticalSlider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #fff;
  cursor: pointer;
}

#verticalSlider::-ms-track {
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

#verticalSlider::-ms-fill-lower {
  background: #555;
  border: none;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000;
}

#verticalSlider::-ms-fill-upper {
  background: #555;
  border: none;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000;
}

#verticalSlider::-ms-thumb {
  border: none;
  height: 20px;
  width: 20px;
  background: #fff;
  cursor: pointer;
}

JavaScript 交互（可选）

如果你需要一些交互功能，比如当用户移动滑块时更新显示的值，你可以添加以下JavaScript代码：

document.getElementById('verticalSlider').addEventListener('input', function() {
  document.getElementById('sliderValue').textContent = this.value;
});

将这段代码放入<script>标签中，即可实现当滑块值改变时更新页面上的显示值。

-- 展开阅读全文 --