Javascript 创建垂直滑块HTML元素

我正在尝试创建自己的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>

jddsjh-
jddsjh-
jddsjh-
jddsjh-

input[type=“range”]{
位置：绝对位置；
-webkit变换：旋转（90度）；
顶部：100px；
}

---

为什么不能使用jQuery？您必须为句柄创建一个资源，或者使用CSS呈现一个资源，但据我所知，它没有webkit外观。要使其正常工作，您必须重新编写jQueryUI的draggable（）。不是太难，但不是我喜欢的。你在找这样的东西吗：@user1090389太好了，你应该回答，这样我就可以接受了。我甚至不知道它是如何工作的，但这正是我需要的：P@JakeMnp，它是HTML5输入类型，叫做范围。如果它是属性，你可以查找一些，我只是把它旋转了90度…@JakeM

top

和

position

CSS不是必需的，但是它在jsfiddle上呈现怪异。作为你答案的补充，你还可以设置控件的样式：