can.ui.Slider API

## Purpose

Make an extensible slider that can be used on it's own or with our model layer.
## Learn from

http://jqueryui.com/demos/slider/
## Options
- disabled
- animate
- max
- min
- orientation
- range
- step
- value
## Events
- slide
- change
- stop
## Methods
## Theming
## Examples
## vertical
## horizontal
## Slider controls tabs

``` javascript

var index = can.compute(2);

new can.ui.Slider("#foo", {value: 2});
new Tabs({index: index});
```
## Notes

In preparation for CanUI, I've been thinking a lot about MXUI's slider: http://javascriptmvc.com/docs.html#!Mxui.Nav.Slider and how to solve the following:

Hookup a slider to a "percent complete" on a model instance and, how we could tell a grid to somehow hook this up.
## Hookin a slider

A basic slider, one that knows nothing of a model has 4 values that determine what it looks like:
- interval
- min
- max
- val - this is the only state value changed by the slider

``` javascript
slider = new can.ui.Slider("#slider", {interval: 1, min: 0, max: 100, val: 50})
```

With a DOM-centric approach, you can hook it up ( and respond to updates in the model) like:

``` javascript
var slider = new can.ui.Slider("#slider", {interval: 1, min: 0, max: 100});

var updateSlider = function(){
slider.val( task.attr('percentComplete') )
}
task.bind("percentComplete", updateSlider)
updateSlider();
$("#slider").bind("change", function(ev, val){
task.attr("percentComplete", val );
})
```

The DOM-centric approach makes it easy to use slider with anything. However, the purpose of CanUI is to make it easier to setup UI elements with Observes and models. How can this be done?
### Option 1 - pass model and an attribute

``` javascript
new can.ui.Slider("#slider", {model: task, attr: "percentComplete" })
```
- What if percentComplete has another format (0-1) but you want to translate that to 0-100?
- What if you can dynamically change interval, min, max, etc?
### Option 2 - pass a standard representation of the model / attribute

``` javascript
new can.ui.Slider("#slider", { val : task.prop("percentComplete" })
```

What does task.prop return to help you?

``` javascript
this.option.val() // reads value
this.options.val( 5 ) // writes value
this.options.val.bind("change" , function(){
// called when the attribute changes
})
```
- What about compound properties?

``` javascript
new can.ui.Slider("#slider", { val : task.prop(function(val){
if( val === undefined ) {
// get the property
return this.attr('percentComplete') * 100
} else {
return this.attr('percentComplete', val / 100 )
}
}})
```
- What about validation errors?
## Hooking up to the grid

With EJS:

```