regresar a la lección
Este material solo está disponible en los siguientes idiomas: English, 日本語, Русский, Türkçe, 简体中文. Por favor, ayúdanos a traducir al Español.

Slider

importancia: 5

Create a slider:

Drag the blue thumb with the mouse and move it.

Important details:

  • When the mouse button is pressed, during the dragging the mouse may go over or below the slider. The slider will still work (convenient for the user).
  • If the mouse moves very fast to the left or to the right, the thumb should stop exactly at the edge.

Abrir un entorno controlado para la tarea.

As we can see from HTML/CSS, the slider is a <div> with a colored background, that contains a runner – another <div> with position:relative.

To position the runner we use position:relative, to provide the coordinates relative to its parent, here it’s more convenient here than position:absolute.

Then we implement horizontal-only Drag’n’Drop with limitation by width.

Abrir la solución en un entorno controlado.