如何将Bootstrap水平Range组件转换为垂直样式？

嘿，这事儿好办！Bootstrap默认没给垂直Range的内置样式，但咱们加几行自定义CSS就能轻松搞定，下面是具体的实现方案：

完整可运行代码 #

<div class="vertical-range-wrapper">
  <label for="customVerticalRange" class="form-label">垂直Range示例</label>
  <input type="range" class="form-range vertical-range" min="0" max="5" step="0.5" id="customVerticalRange">
</div>

<style>
/* 容器用于调整整体布局，让标签和滑块对齐更美观 */
.vertical-range-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem;
}

/* 核心：把水平Range转成垂直的关键样式 */
.vertical-range {
  -webkit-appearance: slider-vertical; /* 适配Chrome、Safari等WebKit内核浏览器 */
  writing-mode: bt-lr; /* 兼容IE浏览器 */
  width: 1.5rem; /* 对应垂直Range的"宽度"，原水平Range的高度 */
  height: 15rem; /* 对应垂直Range的"高度"，原水平Range的宽度 */
  /* 可选：如果希望数值从下往上递增，就加上下面这行反转方向 */
  transform: rotate(180deg);
}

/* 可选：调整标签和滑块的间距 */
.vertical-range-wrapper .form-label {
  margin-bottom: 1rem;
}
</style>

关键细节说明 #

• 兼容性处理：-webkit-appearance: slider-vertical让现代浏览器原生支持垂直滑块，writing-mode: bt-lr是为了照顾老版本IE的兼容性。
• 尺寸适配：旋转后原Range的宽高逻辑会互换，所以需要手动设置width和height来控制垂直滑块的显示大小。
• 数值方向：默认垂直滑块的数值是从上到下变大的，如果想和水平滑块保持一致（从下到上增大），就加上transform: rotate(180deg)反转方向。
• 样式扩展：如果想自定义滑块或轨道的颜色，还能覆盖Bootstrap的默认样式：

/* 自定义滑块颜色 */
.vertical-range::-webkit-slider-thumb {
  background-color: #2563eb;
}
/* 自定义轨道颜色 */
.vertical-range::-webkit-slider-runnable-track {
  background-color: #e2e8f0;
}

这样就能得到一个完全适配Bootstrap风格的垂直Range组件啦！

内容的提问来源于stack exchange，提问作者UserOfStackOverFlow