css垂直输入范围宽度问题

Question

我用这种方式在 div 中设置垂直输入范围：

input[type=range] {transform: rotate(270deg);
}

我不想用

appearance: slider-vertical;

（因为它破坏了我的滑块设计）。

div 是高度：页面的 30%；和宽度：33px；。 我希望输入范围（滑块控件）占据 div 的整个高度。

我不能使用 {width: 100%;}（是的，滑块会对其水平尺寸做出反应）它会使滑块变为 33px。

那么如何将滑块宽度设置为 div 高度的 100% 呢？我是一个非常初学者，有没有一种简单的 CSS 方法来做这样的事情，但实际上有效？ （我没有看到任何地方）

divFoo{
  height: 30%;
  width: 33px;
}

input[type=range].slider {
  width: divFoo.height;
}

谢谢

Answer 1

这必须使用 javascript 来完成。这是代码sn-p。

// We should make sure that the window is loaded first
window.onload = function() {
  // get height of div
  // we can also calculate by using
  // var height = window.offsetHeight * (30 / 100)
  var height = document.getElementById("div").offsetHeight;
  // Now we set the width of the slider to the height of the div
  document.getElementById("slider").style.width = height+"px";
};

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

div {
  width: 33px;
  height: 30%;
}

<!-- Here is your div -->
<div id="div"></div>
<!-- Here is the slider -->
<input type="range" id="slider">