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

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 =...