Создайте слайдер:
Захватите мышкой синий бегунок и двигайте его, чтобы увидеть в работе.
Позже к этому слайдеру можно будет добавить дополнительные функции по чтению/установке значения.
Исходный документ: tutorial/browser/events/slider-simple-src/index.html (fixEvent/getCoords в lib.js).
Важно:
- Слайдер должен нормально работать при резком движении мыши влево или вправо, за пределы полосы. При этом бегунок должен останавливаться четко в нужном конце полосы.
- При нажатом бегунке мышь может выходить за пределы полосы.
Слайдер — это DIV, подкрашенный фоном/градиентом, внутри которого находится другой DIV, оформленный как бегунок, с position:relative.
Бегунок немного поднят, и вылезает по высоте из родителя.
Например, вот так:
<style>
.slider {
border-radius: 5px;
background: #E0E0E0;
background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
background: linear-gradient(left top, #E0E0E0, #EEEEEE);
width: 310px;
height: 15px;
margin: 5px;
}
.thumb {
width: 10px;
height: 25px;
border-radius: 3px;
position: relative;
left: 10px;
top: -5px;
background: blue;
cursor: pointer;
}
</style>
<div class="slider">
<div class="thumb"></div>
</div>
Теперь на этом реализуйте перенос бегунка.
Полное решение: tutorial/browser/events/slider-simple/index.html.
Это горизонтальный Drag’n’Drop, ограниченный по ширине. Его особенность — в position:relative у переносимого элемента, т.е. координата ставится не абсолютная, а относительно родителя.