Erstellen Sie eine vertikale slider-HTML-element

Ich versuche, meine eigenen HTML-element, das wie folgt aussieht:

Der Blick, den ich erstellen möchte: Erstellen Sie eine vertikale slider-HTML-element
Mein Versuch:

Widget ist nur für eine iPad-version der website & ich kann leider die JQuery.

Mein problem: ich versuche, fügen Sie ein Schieberegler - /Pfeil-widget, aber ich weiß nicht wie? Gibt es einen webkit-Optik, die hat einen Pfeil regler drauf? Ist es möglich einen slider Pfeil auf dem widget?

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

Warum können Sie nicht verwenden, jQuery? Sie gehen zu müssen, um ein Element zu erstellen für den Griff oder rendert man mit CSS, aber meines Wissens gibt es nicht einen webkit-Auftritt für Sie. Funktionsfähig zu machen Sie müssen im wesentlichen neu schreiben, jQuery-UI ' s draggable(). Nicht übermäßig schwierig, aber nicht etwas, ich würde begeistert sein.
Sind Sie auf der Suche nach so etwas wie dieses: jsfiddle.net/XyJWa
Das ist perfekt, sollten Sie eine Antwort, so kann ich akzeptieren. Habe keine Ahnung, wie das noch funktioniert, aber seine, was ich brauche 😛
np, es ist eine HTML5 input type, nennt man Spektrum. Sie können sich bis einige, wenn es die Attribute, die ich nur und nahm es und drehte es um 90 Grad...
die top und position CSS ist nicht erforderlich, aber es macht seltsam auf jsFiddle

InformationsquelleAutor sazr | 2012-01-02

CSS:

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

HTML:

<input type="range">

Nur die Ergänzung Ihrer Antwort, Sie können auch den Stil der Steuerelemente: jsfiddle.net/Wv6cU

InformationsquelleAutor henryaaron

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.