创建垂直滑块HTML元素

Question

我正在尝试创建自己的HTML元素，如下所示：

我想要创建的外观： 我的尝试：

该小部件仅适用于该网站的iPad版本。不幸的是，我不能使用JQuery。

我的问题：我正在尝试向窗口小部件添加滑块/箭头，但我不知道怎么做？是否有一个webkit外观上有一个箭头滑块？是否可以在小部件上设置滑块箭头？

我的代码：

<div style="background-color: rgb(191, 326, 383); width: 200px;">
    <ul style="list-style: none; -webkit-appearance: slider-vertical; width: 200px; height: 300px; margin: 0;">
        <li>jddsjh -</li>
        <li>jddsjh -</li>
        <li>jddsjh -</li>
        <li>jddsjh -</li>
    </ul>
</div>

Answer 1

input[type="range"] {
    position:absolute;
    -webkit-transform: rotate(90deg);
    top:100px;
   
}

<input type="range">