kevinchappell/formBuilder

// configure the class for runtime loading
if (!window.fbControls) window.fbControls = []
window.fbControls.push(function(controlClass) {
  /**
   * data range class
   */
  class controlDataRange extends controlClass {
    /**
     * Class configuration - return the icons & label related to this control
     * @returndefinition object
     */
    static get definition() {
      return {
        i18n: {
          default: 'Data Range',
        },
      }
    }

    /**
     * build a text DOM element, supporting other jquery text form-control's
     * @return {Object} DOM Element to be injected into the form.
     */
    build() {
        return this.markup('input', null, {type:"range", min:1, max:10, steps:1, value:0})
    }

  onRender() {
      var valueBubble = '<output class="rangeslider__value-bubble" />';

      function updateValueBubble(pos, value, context) {
          pos = pos || context.position;
          value = value || context.value;
          var $valueBubble = $('.rangeslider__value-bubble', context.$range);
          var tempPosition = pos + context.grabPos;
          var position = (tempPosition <= context.handleDimension) ? context.handleDimension : (tempPosition >= context.maxHandlePos) ? context.maxHandlePos : tempPosition;

          if ($valueBubble.length) {
              $valueBubble[0].style.left = Math.ceil(position) + 'px';
              $valueBubble[0].innerHTML = value;
          }
      }

      $('input[type="range"]').rangeslider({
          polyfill: false,
          onInit: function() {
              this.$range.append($(valueBubble));
              updateValueBubble(null, null, this);
          },
          onSlide: function(pos, value) {
              updateValueBubble(pos, value, this);
          }
      });
  }

  }

  // register this control for the following types & text subtypes
  controlClass.register('DataRange', controlDataRange)
  return controlDataRange
})