Actions with sliders

Author: Gaurav0

app/controllers/slider.js

@@ -2,5 +2,15 @@ import Ember from 'ember';
 
 export default Ember.ObjectController.extend({
     num: 50,
-    vals: [10, 90]
+    vals: [10, 90],
+    text: "50%",
+    num2: 50,
+    didSlideBasic: function() {
+        this.set('num2', this.get('num'));
+    }.observes('num'),
+    actions: {
+        didSlide: function(event, ui) {
+            this.set('text', ui.value + "%");
+        }
+    }
 });

app/templates/slider.hbs

@@ -4,4 +4,7 @@
 
 <h2>Range Slider</h2>
 {{jqui-slider values=vals min=0 max=100 step=10 range=true}} &nbsp; {{vals.firstObject}} - {{vals.lastObject}}
-<p>Just add <code>\{{jqui-slider values=vals min=0 max=100 step=10 range=true}} \{{vals.firstObject}} - \{{vals.lastObject}}</code> to any template in your application.</p>
+<p>Just add <code>\{{jqui-slider values=vals min=0 max=100 step=10 range=true}} \{{vals.firstObject}} - \{{vals.lastObject}}</code> to any template in your application.</p>
+
+<h2>Custom Slider</h2>
+{{jqui-slider value=num2 min=0 max=100 step=10 slideAction="didSlide"}} &nbsp; {{text}}