Creación de un elemento HTML deslizador vertical

Estoy tratando de crear mi propio elemento HTML que se ve así:Creación de un elemento HTML deslizador vertical

La mirada Quiero crear: I am trying to create this look Mi intento: My attempt at replication

El widget es sólo para una Versión de iPad del sitio web & Desafortunadamente no puedo usar JQuery.

Mi problema: Estoy tratando de agregar un control deslizante/flecha al widget pero no sé cómo? ¿Hay una apariencia de webkit que tenga un control deslizante de flecha sobre ella? ¿Es posible tener una flecha deslizante en el widget?

Mi código:

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

Fuente

2012-01-02 Jake M

Por qué no puedes usar jQuery? Tendrás que crear un activo para el identificador o renderizar uno con CSS pero, a mi conocimiento, no hay una apariencia de webkit para él. Para que sea funcional, tendrá que volver a escribir obligatoriamente draggable() de jQuery UI. No es prohibitivamente difícil, pero no es algo que me entusiasme. –

¿Está buscando algo como esto: http://jsfiddle.net/XyJWa/ – henryaaron

@ user1090389 Eso es perfecto, debe hacer una respuesta para que yo pueda aceptar. No tengo idea de cómo funciona eso, pero es lo que necesito: P –

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

<input type="range">

Fuente

2012-01-02 02:31:13 henryaaron

Simplemente complementando tu respuesta, también puede diseñar los controles: http://jsfiddle.net/Wv6cU/ – Duopixel

Creación de un elemento HTML deslizador vertical

Respuesta

Cuestiones relacionadas