Added Slider component

src/scripts/components/index.js

@@ -11,5 +11,6 @@ module.exports = {
   toggle: require('./toggle'),
   radiogroup: require('./radiogroup'),
   checkboxgroup: require('./checkboxgroup'),
-  button: require('./button')
+  button: require('./button'),
+  slider: require('./slider')
 };

src/scripts/components/slider.js

@@ -0,0 +1,44 @@
+'use strict';
+
+module.exports = {
+  name: 'slider',
+  template: require('../../templates/components/slider.tpl'),
+  style: require('../../styles/clay/components/slider.scss'),
+  manipulator: 'slider',
+  defaults: {
+    label: '',
+    description: '',
+    min: 0,
+    max: 100,
+    step: 1,
+    attributes: {}
+  },
+  initialize: function() {
+    var self = this;
+
+    var $value = self.$element.select('.value');
+    var $valuePad = self.$element.select('.value-pad');
+
+    /**
+     * Sets the value display
+     * @return {void}
+     */
+    function setValueDisplay() {
+      var value = self.get();
+      $value.set('value', value);
+      $valuePad.set('innerHTML', value);
+    }
+
+    self.on('change', setValueDisplay);
+    setValueDisplay();
+
+    $value.on('|keyup', function() {
+      $valuePad.set('innerHTML', this.get('value'));
+    });
+
+    $value.on('|change', function() {
+      self.set(this.get('value'));
+      setValueDisplay();
+    });
+  }
+};

src/scripts/lib/manipulators.js

@@ -85,6 +85,21 @@ module.exports = {
     hide: hide,
     show: show
   },
+  slider: {
+    get: function() {
+      return parseFloat(this.$manipulatorTarget.get('value'));
+    },
+    set: function(value) {
+      var initVal = this.get();
+      this.$manipulatorTarget.set('value', value);
+      if (this.get() === initVal) { return this; }
+      return this.trigger('change');
+    },
+    disable: disable,
+    enable: enable,
+    hide: hide,
+    show: show
+  },
   checked: {
     get: function() {
       return this.$manipulatorTarget.get('checked');