Создание вертикального слайдера HTML-элемента

Question

Я пытаюсь создать свой собственный элемент HTML, который выглядит следующим образом:

Внешний вид, который я хочу создать: Моя попытка:

Виджет только для версии сайта для iPad, и я, к сожалению, не могу использовать JQuery.

Моя проблема: Я пытаюсь добавить ползунок / стрелку к виджету, но не знаю как? Есть ли у вебкита внешний вид, на котором есть ползунок со стрелкой? Возможно ли иметь стрелку ползунка на виджете?

Мой код:

<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">