<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" }); }