Posuvník
důležitost: 5
Vytvořte posuvník:
Uchopte modré šoupátko myší a přesuňte je.
Důležité detaily:
- Když je tlačítko myši stisknuto, ukazatel myši se během přetahování může dostat nad nebo pod posuvník. Posuvník bude stále fungovat (pohodlné pro uživatele).
- Pokud se ukazatel přesune velmi rychle doleva nebo doprava, šoupátko by se mělo zastavit přesně na kraji.
Jak vidíme z HTML/CSS, posuvník je <div> s barevným pozadím, který obsahuje šoupátko – další <div> s position:relative.
Pro umístění šoupátka použijeme position:relative, abychom mu poskytli souřadnice relativní vzhledem k jeho rodiči. Zde je to vhodnější než position:absolute.
Pak implementujeme výhradně vodorovné přetahování omezené šířkou.