Question

我尝试使用以下方式创建具有垂直方向的自定义滑块

但是在应用旋转时，如果我将宽度更改为100％，则控制居中到页面。我想在页面中的任何地方渲染具有垂直方向的输入类型范围控件。

Answer 1

回答问题的最后一部分（即，将垂直方向的范围定位在任意位置）：使用设置了display: flex属性的父容器。

.range-container {
  display: flex;
  align-items: center;
  justify-content: center;
  
  height: 200px;
  
  background: #a3e5c1;
}

.range {
  width: 100px;

  transform: rotate(-90deg);
}

<div class="range-container">
  <input class="range" type="range">
</div>

此方法的问题在于，如果父容器的高度需要响应（因此对于较小的视口，它会较小），则可能无法仅使用CSS来实现范围的宽度和父容器的高度的绑定。

尽管我找不到合适的CSS解决方案，但这并不意味着没有人会找到它。

垂直方向问题上的自定义输入范围

1 个答案: