-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
54 lines (44 loc) · 1.76 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
var app = angular.module('app', []);
app.directive('slider', function ($document) {
return {
restrict: 'A',
template: '<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">\
<button class="ui-slider-handle ui-state-default ui-corner-all" style="left: {{ sliderVal }}%"></button>\
</div>',
link: function (scope, element, attrs) {
var $element = $(element),
$slider = $('.ui-slider', $element),
$knob_control = $('button', $element),
width = $slider.width(),
offset = $slider.offset().left;
scope.sliderVal = 0;
var mouseDown = false;
$slider.bind('mousedown', function (evt) {
mouseDown = true;
$document.trigger('mousemove', evt);
});
$document.bind('mouseup', function (evt, partentEvt) {
mouseDown = false;
});
$document.bind('mousemove', function (evt, parentEvt) {
if (!mouseDown) {
return;
}
var diff;
if (evt.pageX) {
diff = evt.pageX - offset;
}
else if (parentEvt.pageX) {
diff = parentEvt.pageX - offset;
}
var percent = diff / width;
scope.sliderVal = Math.round( Math.max(0, Math.min(percent * 100, 100) ) );
scope.$apply();
});
scope.$watch('sliderVal', function (sliderVal) {
$knob_control.stop();
$knob_control.animate({left: sliderVal + '%'} , 32);
});
}
};
});