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

Слайдер

важность: 5

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

Бегунок немного поднят, и вылезает по высоте из родителя.

На этой основе мы реализуем горизонтальный Drag’n’Drop, ограниченный по ширине. Его особенность – в position:relative у переносимого элемента, т.е. координата ставится не абсолютная, а относительно родителя.

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

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

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

Важно:

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

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