Слайдер
важность: 5
Создайте слайдер:
Захватите мышкой синий бегунок и двигайте его.
Важные детали:
- Слайдер должен нормально работать при резком движении мыши влево или вправо за пределы полосы. При этом бегунок должен останавливаться чётко в нужном конце полосы.
- При нажатом бегунке мышь может выходить за пределы полосы слайдера, но слайдер пусть всё равно работает (это удобно для пользователя).
Как можно видеть из HTML/CSS, слайдер – это <div>, подкрашенный фоном/градиентом, внутри которого находится другой <div>, оформленный как бегунок, с position:relative.
Используем для его координат position:relative, т.е. координаты ставятся не абсолютные, а относительно родителя, так как это удобнее.
И дальше реализуем Drag’n’Drop только по горизонтали, с ограничением по ширине.