Suwak

Wykorzystaj plik suwak.html do implementacji suwaka.

Ćwiczenie 12.4:

  1. Uchwyt przesuwa się przy naciśniętym lewym przycisku myszki.
  2. Po kliknięciu na pasek uchwyt przeskakuje środkiem na klikniętą pozycję.
  3. Uchwyt przemieszcza się tylko pionowo i  nie powinien wykraczać poza pasek w pionie ani jednym pikselem.

Na poniższych rysunkach (Rysunek 12.1 oraz Rysunek 12.2) pokazane są wymiary związane ze zdarzeniem i elementem. W swoim rozwiązaniu korzystałem z funkcji getBoundingClientRect().

Rysunek 12.1. Wymary związane ze zdarzeniem

Wymary związane ze zdarzeniem

Rysunek 12.2. Wymary związane z pozycją elementu

Wymary związane z pozycją elementu