Tạo một HTML yếu tố trượt dọc

Question

tôi đang cố gắng để tạo ra phần tử HTML của riêng tôi trông như thế này:

Diện mạo Tôi muốn tạo: My nỗ lực:

Các widget chỉ dành cho một Phiên bản iPad của trang web & Tôi không may không thể sử dụng JQuery.

Vấn đề của tôi: Tôi đang cố gắng thêm thanh trượt/mũi tên vào tiện ích nhưng tôi không biết làm cách nào? Có ngoại hình webkit nào có thanh trượt mũi tên trên đó không? Có thể có một mũi tên trượt trên widget không?

Mã của tôi:

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