Javascript 如何制作移动响应垂直范围滑块

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

我在这里添加了我的代码

.slido{ -webkit外观：无； 宽度：100%； 高度：15px； 边界半径：5px； 背景：D3； 大纲：无； 不透明度：0.7； -webkit转换：.2s； 转变：不透明度； -webkit变换：旋转90度； } .slido:：-webkit滑块拇指{ -webkit外观：无； 外观：无； 宽度：25px； 高度：25px； 边界半径：50%； 背景：4CAF50； 光标：指针； }

---

您已经将水平滑块转换为垂直滑块，这将不起作用，因此您可以仅使用垂直滑块检查代码段

让应用==>{ 函数updatesliderelation{ if元素{ 让parent=element.parentElement， lastValue=parent.getAttribute'data-slider-value'； 如果lastValue==element.value{ return；//无值更改，无需更新 } parent.setAttribute'data-slider-value'，element.value； 设$thumb=parent.querySelector'.range-slider\uuu thumb'， $bar=parent.querySelector'.range-slider\uuu-bar'， pct=element.value*parent.clientHeight-$thumb.clientHeight/parent.clientHeight； $thumb.style.bottom=`${pct}%`； $bar.style.height=`calc${pct}%+${$thumb.clientHeight/2}px`； $thumb.textContent=`${element.value}%`； } } 返回{ updateSlider:updateSlider }; }; 函数初始化和设置滑块{ 常量输入=[].slice.calldocument.querySelectorAll'.range slider input'； inputs.forEachinput=>input.setAttribute'value'，'50'； inputs.forEachinput=>app.updateslidenput； //跨浏览器支持在拖动控制柄时值立即更改，因此有两种事件类型。 inputs.forEachinput=>input.addEventListener'input'，element=>app.UpdateSlideInput； inputs.forEachinput=>input.addEventListener'change'，element=>app.UpdateSlideInput； }; *, *：之前， *：之后{ 框大小：边框框； } html， 身体{ 身高：100%； } 身体{ 保证金：0； 背景：3D4A； 颜色：白色； 字体系列：无衬线； } .info{ 位置：绝对位置； 排名：0； 左：0； 填充：10px； 不透明度：0.5； } .集装箱{ 位置：相对位置； 显示：内联块； 填充顶部：40px； } .范围滑块{ 显示：内联块； 宽度：40px； 位置：相对位置； 文本对齐：居中； 最大高度：100%； } .范围滑块：之前{ 位置：绝对位置； 顶部：-2米； 左：0.5em； 内容：属性数据滑块值“%”； 颜色：白色； 字体大小：90%； } .范围滑块{ 位置：绝对位置； 左：5px； 宽度：30px； 高度：30px； 线高：30px； 背景：白色； 颜色：777； 字体大小：50%； 盒影：0 0 4px 3d4a； 边界半径：50%； 指针事件：无； } .范围滑块{ 左：16px； 底部：0； 位置：绝对位置； 背景：线性渐变淡蓝色，蓝色； 指针事件：无； 宽度：8px； 边界半径：10px； } .范围滑块输入[类型=范围][方向=垂直]{ 位置：相对位置； 保证金：0； 高度：calc100vh-50px； 宽度：100%； 显示：内联块； 位置：相对位置； 写入方式：bt-lr； -webkit外观：滑块垂直； } .range滑块输入[type=range][orient=vertical]：-webkit滑块可运行轨迹， .range滑块输入[type=range][orient=vertical]：-webkit滑块拇指{ -webkit外观：无； } .range滑块输入[type=range][orient=vertical]：-webkit滑块可运行轨迹{ 边界：无； 背景：3440； 宽度：8px； 边框颜色：3440； 边界半径：10px； 盒影：0 0 2px 3d4a； } .范围滑块输入[类型=范围][方向=垂直]：-moz范围轨迹{ 边界：无； 背景：3440； 宽度：8px； 边框颜色：3440； 边界半径：10px； 盒影：0 0 2px 3d4a； } .range滑块输入[类型=范围][方向=垂直]：-ms轨迹{ 边界：无； 背景：3440； 宽度：8px； 边框颜色：3440； 边界半径：10px； 盒影：0 0 2px 3d4a； 颜色：透明； 身高：100%； } .范围滑块输入[类型=范围][方向=垂直]：-ms填充较低， .范围滑块输入[类型=范围][方向=垂直]：-ms填充上限， .range滑块输入[type=range][orient=vertical]：-ms工具提示{ 显示：无； } .range滑块输入[type=range][orient=vertical]：-webkit滑块拇指{ 宽度：30px； 高度：30px； 不透明度：0； } .range滑块输入[type=range][orient=vertical]：-moz range thumb{ 宽度：30px； 高度：30px； 不透明度：0； } .range滑块输入[类型=范围][方向=垂直]：-ms thumb{ 宽度：30px； 高度：30px； 不透明度：0； } 对元素使用“仅变换”不会影响其父元素或任何其他元素的大小或位置。绝对没有办法改变这种转换工作原理的事实。所以在上面添加div 可以处理旋转溢出的父级是一种解决方案

代码更新：

斯莱多先生{ -webkit外观：无； 宽度：100vh； 高度：15px； 边界半径：5px； 背景：D3； 大纲：无； 不透明度：0.7； -webkit转换：.2s； 转变：不透明度； 变换：旋转90度； } .slido:：-webkit滑块拇指{ -webkit外观：无； 外观：无； 宽度：25px； 高度：25px； 边界半径：50%； 背景：4CAF50； 光标：指针； } .旋转外包装{ 显示：表格； } .内部旋转包装{ 填充：50%0； 身高：0； } .要旋转的元素{ 显示：块； 变换原点：左上角； /*注意：对于顺时针旋转，请使用注释掉的 转换而不是这个*/ 变换：旋转-90度平移-100%； /*变换：旋转90度平移0，-100%*/ 利润率最高：-50%； /*不重要，但如果正在旋转的元素包含 文本和你想要一个单独的长垂直线的文本和预旋转 元素的宽度足够小，文本可以换行：*/ 空白：nowrap； }

---

@Buljan这不是复制粘贴检查垂直滑块，而是基于屏幕分辨率。根据请求，它是其中一个代码笔的增强版本。因此，您增强了其他人的代码。增强了什么？介意解释一下增强功能吗？变化是什么？现在什么更好？该代码与OP的代码有何关联？附言：按照要求？是谁干的？密码笔？什么？@RokoC.Buljan与高度相关的增强==高度：calc100vh-50px；==根据屏幕分辨率，它可以更好地调整高度。根据要求，如果不滚动页面，您将能够看到整个范围的滑块。我认为我们可以在不添加库的情况下解决此问题。！请检查我的答案。宽度：100%；？%什么的？你为什么不使用vh装置呢？宽度为80vh时，将始终相对于设备视口高度。编辑后，您忘记了元素已旋转。和PS为什么使用显示：表格；已更新，请检查。是否有响应。由于父div也可用，因此对高度没有影响。要根据不同的设备进行调整，他可以使用媒体查询。