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

[importance 5]

На основе слайдера из задачи создайте графический компонент, который умеет возвращать/получать значение.

Синтаксис:

var slider = new Slider({
  elem: $('#slider'), 
  max: 100 // слайдер на самой правой позиции соответствует 100
});

Метод setValue устанавливает значение:

slider.setValue(50);

У слайдера должно быть два события: slide при каждом передвижении и change при отпускании мыши (установке значения).

Пример использования:

$(slider).on({
  slide: function(value) {
    $('#slide').html(value);
  },
  change: function(value) {
    $('#change').html(value);
  }
});

В действии: [iframe src="solution" height="60"]

Дизайн слайдера, ширина/высота элементов должна быть изменяемой через CSS, без необходимости трогать JS-код.
Центр бегунка должен располагаться над значением. Например, он должен быть в центре для 50 при максимуме 100.

Исходный документ -- возьмите решение из задачи .