Source: control-slider.js

/**
  * Construct a new Slider control.
  *
  * @class
  * @param {Home} home the home that this control belongs to.
  * @param {String} id the id of this control. Updates will be POSTed to
  *                    <code>home.control_endpoint/id</code>
  * @param {Object} options options for this control:
  * <ul>
  *   <li>
  *     <code>name</code> - String, required - friendly name for this control
  *   </li>
  *   <li>
  *     <code>min</code> - float, required - minimum value.
  *   </li>
  *   <li>
  *     <code>max</code> - float, required - maximum value.
  *   </li>
  *   <li>
  *     <code>value</code> - float, required - initial value.
  *   </li>
  *   <li>
  *     <code>step</code> - float, required - amount of one slider step.
  *   </li>
  * </ul>
  */
function SliderControl(home, id, options) {
  "use strict";
  this.home = home;
  this.id = id;
  this.options = options;
  var template_source = $("#control-slider-template").html();
  this.template = Handlebars.compile(template_source);
}

SliderControl.prototype.render = function() {
  "use strict";
  this.html = $(this.template(this.options));
  this.input = this.html.find("input");
  var thiz = this;
  var value = parseFloat(this.input.val());
  // Instead of listening for the change event, which triggers at each and every
  // step on Chrome / WebKit / Blink and would spam the server, set an interval
  // that checks every half a second if the value changed.
  setInterval(function() {
    if (parseFloat(thiz.input.val()) !== value) {
      value = parseFloat(thiz.input.val());
      $.post(thiz.home.options.control_endpoint + thiz.id, {"value": value});
    }
  }, 500);
  return this.html;
};

Home.register_control("slider", SliderControl);