Creating a vertical slider HTML element

Question

I am trying to create my own HTML element that looks like this:

The look I want to create: My attempt:

The widget is only for a iPad version of the website & I cannot unfortunately use JQuery.

My problem: I am trying to add a slider/arrow to the widget but I dont know how? Is there a webkit appearance that has an arrow slider on it? Is it possible to have a slider arrow on the widget?

My code:

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

Solution

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

<input type="range">

Comments

[methodofaction]

Just complementing your answer, you can also style the controls: jsfiddle.net/Wv6cU