Tworzenie suwak pionowy HTML elementu

próbuję stworzyć własny element HTML, który wygląda tak:Tworzenie suwak pionowy HTML elementu

Spojrzenie Chcę utworzyć: I am trying to create this look moja próba: My attempt at replication

Widget jest tylko dla Wersja na iPada strony & Niestety nie mogę używać JQuery.

Mój problem: Próbuję dodać suwak/strzałkę do widżetu, ale nie wiem jak? Czy istnieje wygląd webkita z suwakiem strzałek? Czy na widżecie można umieścić strzałkę suwaka?

Mój kod:

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

Źródło

2012-01-02 Jake M

Dlaczego nie można użyć jQuery? Będziesz musiał utworzyć zasób dla uchwytu lub renderować go za pomocą CSS, ale według mojej wiedzy nie ma dla niego wyglądu webkitu. Aby to działało, będziesz musiał ponownie napisać komendę jQuery UI do przeciągania(). Nie jest to zbyt trudne, ale nie jest czymś, z czym bym się entuzjastycznie nastawił. –

Szukasz czegoś takiego: http://jsfiddle.net/XyJWa/ – henryaaron

@ user1090389 To jest doskonałe, powinieneś odpowiedzieć, abym mógł zaakceptować. Nie mam pojęcia, jak to działa, ale to, czego potrzebuję: P –

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

<input type="range">

Źródło

2012-01-02 02:31:13 henryaaron

Tylko uzupełniając twoją odpowiedź, może również sterować stylem: http://jsfiddle.net/Wv6cU/ – Duopixel

Tworzenie suwak pionowy HTML elementu

Odpowiedz

Powiązane problemy