Html css垂直输入范围宽度问题

我用css在div中设置了一个垂直输入范围：

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

我不想用

appearance: slider-vertical;

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

div是高度：页面的30%；和宽度：33px；。 我希望输入范围（滑块控制）取div的全部高度

我不能使用{width:100%；}（是的，滑块会对其作出水平尺寸的反应），它会使滑块达到33px

那么，如何将滑块宽度设置为div高度的100%？我是一个非常初学者，有没有一个简单的css方法来做这样的事情，但实际上是可行的？ （我哪儿也没看见）

---

谢谢

这必须用javascript来完成。下面是代码片段

//我们应该确保首先加载窗口
window.onload=函数（）{
//获取div的高度
//我们也可以使用
//var高度=窗口离地高度*（30/100）
var height=document.getElementById（“div”）.offsetHeight；
//现在我们将滑块的宽度设置为div的高度
document.getElementById（“滑块”）.style.width=height+“px”；
};
html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
div{
宽度：33px；
身高：30%；
}

必须使用javascriptthis This This This This This->input[type=range].slider{width:divFoo.height；}不，必须使用javascript完成。我会发布一个代码片段，谢谢你的回复！代码中有一点疏忽：var height=document.getElementById（“div”）.offsetHeight+“px”；哎呀，我的错，让我编辑一下。别忘了把它标为正确答案！
divFoo{
  height: 30%;
  width: 33px;
}

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