时间戳

首页 > 解决方案 > 如何制作移动响应式垂直范围滑块

javascript - 如何制作移动响应式垂直范围滑块

问题描述

我已经将范围滑块位置设置为垂直。但它没有响应。我签入了 chrome 默认移动设备。调整范围滑块时，它将滚动页面

我在这里添加了我的代码。

.slido{   
 -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  -webkit-transform: rotate(90deg);
}

.slido::-webkit-slider-thumb {
   -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
<input type="range" class="slido" min="1" max="100" step="1">

标签： javascriptjqueryhtmlcssresponsive-design

解决方案

仅transform在元素上使用根本不会影响其父元素或任何其他元素的大小或位置。绝对没有办法改变转换如何工作的事实。所以添加div父级（可以处理旋转溢出）是一种解决方案。

代码更新：

.slido {
  -webkit-appearance: none;
  width: 100vh;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  transform: rotate(90deg);
}

.slido::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.rotation-wrapper-outer {
  display: table;
}

.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}

.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
         transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;
  /* Not vital, but possibly a good idea if the element you're rotating contains
         text and you want a single long vertical line of text and the pre-rotation
         width of your element is small enough that the text wraps: */
  white-space: nowrap;
}
<div id="container">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <input type="range" class="slido" min="1" max="100" step="1">
    </div>
  </div>
</div>

推荐阅读