kembali ke pelajaran
Materi ini hanya tersedia dalam bahasa berikut: English, Español, Français, Italiano, 日本語, Русский, Türkçe, Українська, 简体中文. Tolong, bantu kami menerjemahkan ke dalam Indonesia.

Slider

pentingnya: 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.

Buka sandbox untuk tugas tersebut.

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.

Buka solusi di kotak pasir.