вернуться к уроку

Слайдер

важность: 5

Создайте слайдер:

Захватите мышкой синий бегунок и двигайте его.

Важные детали:

  • Слайдер должен нормально работать при резком движении мыши влево или вправо за пределы полосы. При этом бегунок должен останавливаться чётко в нужном конце полосы.
  • При нажатом бегунке мышь может выходить за пределы полосы слайдера, но слайдер пусть все равно работает (это удобно для пользователя).

Открыть песочницу для задачи.

Как можно видеть из HTML/CSS, слайдер – это <div>, подкрашенный фоном/градиентом, внутри которого находится другой <div>, оформленный как бегунок, с position:relative.

Используем для его координат position:relative, т.е. координаты ставятся не абсолютные, а относительно родителя, так как это удобнее.

И дальше реализуем Drag’n’Drop только по горизонтали, с ограничением по ширине.

Открыть решение в песочнице.