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