init

02-ui/05-widgets/06-widget-tasks/06-slider-events/task.md

@@ -0,0 +1,45 @@
+# Слайдер с событиями
+
+[importance 5]
+
+На основе слайдера из задачи [](/task/slider) создайте графический компонент, который умеет возвращать/получать значение.
+
+Синтаксис:
+
+```js
+var slider = new Slider({
+  elem: $('#slider'), 
+  max: 100 // слайдер на самой правой позиции соответствует 100
+});
+```
+
+Метод `setValue` устанавливает значение:
+
+```js
+slider.setValue(50);
+```
+
+У слайдера должно быть два события: `slide` при каждом передвижении и `change` при отпускании мыши (установке значения).
+
+Пример использования:
+
+```js
+$(slider).on({
+  slide: function(value) {
+    $('#slide').html(value);
+  },
+  change: function(value) {
+    $('#change').html(value);
+  }
+});
+```
+
+В действии:
+[iframe src="solution" height="60"]
+
+<ul>
+<li>Дизайн слайдера, ширина/высота элементов должна быть изменяемой через CSS, без необходимости трогать JS-код.</li>
+<li>Центр бегунка должен располагаться над значением. Например, он должен быть в центре для 50 при максимуме 100.</li>
+</ul>
+
+Исходный документ -- возьмите решение из задачи [](/task/slider).