돌아가기
이 글은 다음 언어로만 작성되어 있습니다. English, 日本語, Русский, Türkçe, 简体中文. 한국어 번역에 참여해주세요.

Slider

중요도: 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.

샌드박스를 열어 정답을 작성해보세요.

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.

샌드박스를 열어 정답을 확인해보세요.