CanJS jQuery Template

Includes jQuery, CanJS and all of its plugins. Use it as a starting point when you want to demo something.

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.construct.proxy.js"></script>
<script src="http://canjs.us/release/latest/can.control.plugin.js"></script>
<script src="http://canjs.us/release/latest/can.observe.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.observe.backup.js"></script>
<script src="http://canjs.us/release/latest/can.observe.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.observe.setter.js"></script>
<script src="http://canjs.us/release/latest/can.observe.validations.js"></script>
<script src="http://canjs.us/release/latest/can.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.fixture.js"></script>
<script src="http://canjs.us/release/latest/can.view.mustache.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>
<script src="http://jquerypp.com/release/latest/jquerypp.js"></script>
<div id='container'>
    <div id='slider'></div>
</div>
<div>Progress <strong id='progress'>0.5</strong></div>

CSS

#slider {
    border: solid 1px blue;
    background-color: red;
    height: 30px;
    width: 30px;
    cursor: ew-resize;
}
#container {
    border: solid 1px black;
}

JavaScript

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