# Слайдер с событиями

[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).