Control deslizante
importancia: 5
Crea un control deslizante:
Arrastra el pasador azul con el ratón y muévelo.
Detalles importantes:
- Cuando el botón del ratón es presionado, durante el arrastrado del ratón puedes ir por arriba o debajo de la barra deslizante. Ésta seguirá funcionando (es lo conveniente para el usuario).
- Si el ratón se mueve muy rápido hacia la izquierda o la derecha, el pasador se detiene exactamente en el borde.
Como podemos ver en el HTML/CSS, la barra de desplazamiento es un <div> con un fondo de color, que contiene un pasador: otro <div> con position:relative.
Para posicionar el pasador usamos position:relative, para proveer las coordenadas relativas a su padre, aquí es más conveniente que position:absolute.
En este caso implementamos un Arrastrar y Soltar horizontal limitado por el ancho.