如何实现带标签的垂直input range滑块并做响应式适配

问题根源 #

你当前的datalist默认使用水平flex布局，当滑块切换为垂直形态时，datalist的布局方向、对齐规则没有同步适配，同时滑块和标签的容器布局也没有对应调整，才会出现标签消失/错位的问题。

核心适配规则 #

你需要在媒体查询中同步修改滑块、datalist、外层容器的布局属性：

• 移动端外层容器改为水平flex布局，让垂直滑块和标签列表并排排列
• 滑块修改为垂直显示，调整宽高参数，兼容webkit和火狐内核
• datalist改为垂直flex布局，高度和滑块保持一致，justify-content维持space-between实现标签均匀分布

完整修改后代码 #

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS v5.0.2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  </head>
  <style>
    /* 大屏默认水平样式 */
    datalist {
      display: flex;
      justify-content: space-between;
      color: red;
      width: 100%;
    }
    input[type="range"] {
      width: 100%;
    }
    .range-container {
      width: 100%;
    }
    /* 移动端适配，768px为分界点可自行调整 */
    @media (max-width: 767px) {
      .range-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        height: 300px;
      }
      input[type="range"] {
        width: auto;
        height: 100%;
        -webkit-appearance: slider-vertical;
        writing-mode: bt-lr; /* 兼容火狐 */
      }
      datalist {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: auto;
        height: 100%;
      }
    }
  </style>
  <body>
    <div class="container mt-4">
      <br><br><br>
      <!-- 加一层容器方便适配布局 -->
      <div class="range-container">
        <input type="range" min="1" max="4" list="tickmarks" > 
        <datalist id="tickmarks">
          <option value="1" label="3-9 Months"></option>
          <option value="2" label="9-15 Months"></option>
          <option value="3" label="15-24 Months"></option>
          <option value="4" label=" >24 Months"></option>
        </datalist>
      </div>
    </div>

    <!-- Bootstrap JavaScript Libraries -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  </body>
</html>

注意事项 #

• 可以自行调整媒体查询的分界阈值、滑块高度、容器间距等参数匹配你的设计需求
• 如果需要标签显示在滑块左侧，调整range-container的flex方向或者调换input和datalist的位置即可

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