can.ui.Slider API

[justinbmeyer]

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

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

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:

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

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

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

What does task.prop return to help you?

 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?

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:

<div <%= (el) -> new can.ui.Slider(el, {val : task.prop("percentComplete") } ) %> >

Gross!

[justinbmeyer]

I think we could support computed props like:

Todo = can.Observe({
  prettyDate : can.prop(function(){
    return this.attr('date').toString() 
  })
})

[amcdnl]

I think it would be nice to support ranges by passing a array to the 'value' attribute.

Example: http://jqueryui.com/demos/slider/#range

[ralphholzmann]

I'm a fan of option 1. Not only do I think that it would be the easiest to implement (we wouldn't have to create some new "standard representation" of properties of models), but I think the code reads easier as well. Option 1 is more decoupled IMO.

[moschel]

Should this progressively enhance input type=range els? http://wufoo.com/html5/types/8-range.html