<div id='container'>
<div id='slider'></div>
</div>
<div>Progress <strong id='progress'>50</strong></div>
makeSlider();
var task = new can.Observe({progress: 50});
var progress = can.compute(function(newValue){
if(arguments.length) { // setter
task.attr('progress', newValue * 100)
} else {
return task.attr('progress') / 100
}
})
new Slider("#slider",{
value: progress
})
task.bind("progress",function(ev, newVal){
$("#progress").html(newVal)
});
function makeSlider(){
Slider = can.Control.extend({
init: function(){
this.updatePosition()
},
"draginit": function(el, ev, drag){
drag.limit(this.element.parent());
drag.horizontal();
},
"dragmove": function(el, ev, drag){
var container = this.element.parent(),
sliderOffset = el.offset().left,
containerOffset = container.offset().left,
sliderWidth = el.outerWidth(),
containerWidth = container.width();
containerOffset +=
parseInt( container.css("paddingLeft") ) +
parseInt( container.css("borderLeftWidth") )
var value = ( (sliderOffset-containerOffset ) /
(containerWidth - sliderWidth) );
this.options.value(value)
},
"{value} change" : "updatePosition",
updatePosition: function(){
var value = this.options.value(),
container = this.element.parent(),
containerOffset = container.offset().left,
sliderWidth = this.element.outerWidth(),
containerWidth = container.width();
containerOffset +=
parseInt( container.css("paddingLeft") ) +
parseInt( container.css("borderLeftWidth") )
var sliderOffset = containerOffset+
( (containerWidth - sliderWidth) *
(value) )
this.element.offset({
left: sliderOffset
})
},
"resize": "updatePosition"
});
}