创建垂直滑块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">