<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}); new Slider("#slider",{ value: project.compute('progress') }) project.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" }); }