regresar a la lección

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.

Abrir un entorno controlado para la tarea.

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.

Abrir la solución en un entorno controlado.