{"ast":null,"code":"import snippet from 'tui-code-snippet';\nimport { toInteger, clamp } from '../../util';\nimport { keyCodes } from '../../consts';\nconst INPUT_FILTER_REGEXP = /(-?)([0-9]*)[^0-9]*([0-9]*)/g;\n/**\r\n * Range control class\r\n * @class\r\n * @ignore\r\n */\n\nclass Range {\n  /**\r\n   * @constructor\r\n   * @extends {View}\r\n   * @param {Object} rangeElements - Html resources for creating sliders\r\n   *  @param {HTMLElement} rangeElements.slider - b\r\n   *  @param {HTMLElement} [rangeElements.input] - c\r\n   * @param {Object} options - Slider make options\r\n   *  @param {number} options.min - min value\r\n   *  @param {number} options.max - max value\r\n   *  @param {number} options.value - default value\r\n   *  @param {number} [options.useDecimal] - Decimal point processing.\r\n   *  @param {number} [options.realTimeEvent] - Reflect live events.\r\n   */\n  constructor(rangeElements, options = {}) {\n    this._value = options.value || 0;\n    this.rangeElement = rangeElements.slider;\n    this.rangeInputElement = rangeElements.input;\n\n    this._drawRangeElement();\n\n    this.rangeWidth = this._getRangeWidth();\n    this._min = options.min || 0;\n    this._max = options.max || 100;\n    this._useDecimal = options.useDecimal;\n    this._absMax = this._min * -1 + this._max;\n    this.realTimeEvent = options.realTimeEvent || false;\n    this.eventHandler = {\n      startChangingSlide: this._startChangingSlide.bind(this),\n      stopChangingSlide: this._stopChangingSlide.bind(this),\n      changeSlide: this._changeSlide.bind(this),\n      changeSlideFinally: this._changeSlideFinally.bind(this),\n      changeInput: this._changeValueWithInput.bind(this, false),\n      changeInputFinally: this._changeValueWithInput.bind(this, true),\n      changeInputWithArrow: this._changeValueWithInputKeyEvent.bind(this)\n    };\n\n    this._addClickEvent();\n\n    this._addDragEvent();\n\n    this._addInputEvent();\n\n    this.value = options.value;\n    this.trigger('change');\n  }\n  /**\r\n   * Destroys the instance.\r\n   */\n\n\n  destroy() {\n    this._removeClickEvent();\n\n    this._removeDragEvent();\n\n    this._removeInputEvent();\n\n    this.rangeElement.innerHTML = '';\n    snippet.forEach(this, (value, key) => {\n      this[key] = null;\n    });\n  }\n  /**\r\n   * Set range max value and re position cursor\r\n   * @param {number} maxValue - max value\r\n   */\n\n\n  set max(maxValue) {\n    this._max = maxValue;\n    this._absMax = this._min * -1 + this._max;\n    this.value = this._value;\n  }\n\n  get max() {\n    return this._max;\n  }\n  /**\r\n   * Get range value\r\n   * @returns {Number} range value\r\n   */\n\n\n  get value() {\n    return this._value;\n  }\n  /**\r\n   * Set range value\r\n   * @param {Number} value range value\r\n   * @param {Boolean} fire whether fire custom event or not\r\n   */\n\n\n  set value(value) {\n    value = this._useDecimal ? value : toInteger(value);\n    const absValue = value - this._min;\n    let leftPosition = absValue * this.rangeWidth / this._absMax;\n\n    if (this.rangeWidth < leftPosition) {\n      leftPosition = this.rangeWidth;\n    }\n\n    this.pointer.style.left = `${leftPosition}px`;\n    this.subbar.style.right = `${this.rangeWidth - leftPosition}px`;\n    this._value = value;\n\n    if (this.rangeInputElement) {\n      this.rangeInputElement.value = value;\n    }\n  }\n  /**\r\n   * event tirigger\r\n   * @param {string} type - type\r\n   */\n\n\n  trigger(type) {\n    this.fire(type, this._value);\n  }\n  /**\r\n   * Calculate slider width\r\n   * @returns {number} - slider width\r\n   */\n\n\n  _getRangeWidth() {\n    const getElementWidth = element => toInteger(window.getComputedStyle(element, null).width);\n\n    return getElementWidth(this.rangeElement) - getElementWidth(this.pointer);\n  }\n  /**\r\n   * Make range element\r\n   * @private\r\n   */\n\n\n  _drawRangeElement() {\n    this.rangeElement.classList.add('tui-image-editor-range');\n    this.bar = document.createElement('div');\n    this.bar.className = 'tui-image-editor-virtual-range-bar';\n    this.subbar = document.createElement('div');\n    this.subbar.className = 'tui-image-editor-virtual-range-subbar';\n    this.pointer = document.createElement('div');\n    this.pointer.className = 'tui-image-editor-virtual-range-pointer';\n    this.bar.appendChild(this.subbar);\n    this.bar.appendChild(this.pointer);\n    this.rangeElement.appendChild(this.bar);\n  }\n  /**\r\n   * Add range input editing event\r\n   * @private\r\n   */\n\n\n  _addInputEvent() {\n    if (this.rangeInputElement) {\n      this.rangeInputElement.addEventListener('keydown', this.eventHandler.changeInputWithArrow);\n      this.rangeInputElement.addEventListener('keyup', this.eventHandler.changeInput);\n      this.rangeInputElement.addEventListener('blur', this.eventHandler.changeInputFinally);\n    }\n  }\n  /**\r\n   * Remove range input editing event\r\n   * @private\r\n   */\n\n\n  _removeInputEvent() {\n    if (this.rangeInputElement) {\n      this.rangeInputElement.removeEventListener('keydown', this.eventHandler.changeInputWithArrow);\n      this.rangeInputElement.removeEventListener('keyup', this.eventHandler.changeInput);\n      this.rangeInputElement.removeEventListener('blur', this.eventHandler.changeInputFinally);\n    }\n  }\n  /**\r\n   * change angle event\r\n   * @param {object} event - key event\r\n   * @private\r\n   */\n\n\n  _changeValueWithInputKeyEvent(event) {\n    const {\n      keyCode,\n      target\n    } = event;\n\n    if ([keyCodes.ARROW_UP, keyCodes.ARROW_DOWN].indexOf(keyCode) < 0) {\n      return;\n    }\n\n    let value = Number(target.value);\n    value = this._valueUpDownForKeyEvent(value, keyCode);\n    const unChanged = value < this._min || value > this._max;\n\n    if (!unChanged) {\n      const clampValue = clamp(value, this._min, this.max);\n      this.value = clampValue;\n      this.fire('change', clampValue, false);\n    }\n  }\n  /**\r\n   * value up down for input\r\n   * @param {number} value - original value number\r\n   * @param {number} keyCode - input event key code\r\n   * @returns {number} value - changed value\r\n   * @private\r\n   */\n\n\n  _valueUpDownForKeyEvent(value, keyCode) {\n    const step = this._useDecimal ? 0.1 : 1;\n\n    if (keyCode === keyCodes.ARROW_UP) {\n      value += step;\n    } else if (keyCode === keyCodes.ARROW_DOWN) {\n      value -= step;\n    }\n\n    return value;\n  }\n  /**\r\n   * change angle event\r\n   * @param {boolean} isLast - Is last change\r\n   * @param {object} event - key event\r\n   * @private\r\n   */\n\n\n  _changeValueWithInput(isLast, event) {\n    const {\n      keyCode,\n      target\n    } = event;\n\n    if ([keyCodes.ARROW_UP, keyCodes.ARROW_DOWN].indexOf(keyCode) >= 0) {\n      return;\n    }\n\n    const stringValue = this._filterForInputText(target.value);\n\n    const waitForChange = !stringValue || isNaN(stringValue);\n    target.value = stringValue;\n\n    if (!waitForChange) {\n      let value = this._useDecimal ? Number(stringValue) : toInteger(stringValue);\n      value = clamp(value, this._min, this.max);\n      this.value = value;\n      this.fire('change', value, isLast);\n    }\n  }\n  /**\r\n   * Add Range click event\r\n   * @private\r\n   */\n\n\n  _addClickEvent() {\n    this.rangeElement.addEventListener('click', this.eventHandler.changeSlideFinally);\n  }\n  /**\r\n   * Remove Range click event\r\n   * @private\r\n   */\n\n\n  _removeClickEvent() {\n    this.rangeElement.removeEventListener('click', this.eventHandler.changeSlideFinally);\n  }\n  /**\r\n   * Add Range drag event\r\n   * @private\r\n   */\n\n\n  _addDragEvent() {\n    this.pointer.addEventListener('mousedown', this.eventHandler.startChangingSlide);\n  }\n  /**\r\n   * Remove Range drag event\r\n   * @private\r\n   */\n\n\n  _removeDragEvent() {\n    this.pointer.removeEventListener('mousedown', this.eventHandler.startChangingSlide);\n  }\n  /**\r\n   * change angle event\r\n   * @param {object} event - change event\r\n   * @private\r\n   */\n\n\n  _changeSlide(event) {\n    const changePosition = event.screenX;\n    const diffPosition = changePosition - this.firstPosition;\n    let touchPx = this.firstLeft + diffPosition;\n    touchPx = touchPx > this.rangeWidth ? this.rangeWidth : touchPx;\n    touchPx = touchPx < 0 ? 0 : touchPx;\n    this.pointer.style.left = `${touchPx}px`;\n    this.subbar.style.right = `${this.rangeWidth - touchPx}px`;\n    const ratio = touchPx / this.rangeWidth;\n    const resultValue = this._absMax * ratio + this._min;\n    const value = this._useDecimal ? resultValue : toInteger(resultValue);\n    const isValueChanged = this.value !== value;\n\n    if (isValueChanged) {\n      this.value = value;\n\n      if (this.realTimeEvent) {\n        this.fire('change', this._value, false);\n      }\n    }\n  }\n\n  _changeSlideFinally(event) {\n    event.stopPropagation();\n\n    if (event.target.className !== 'tui-image-editor-range') {\n      return;\n    }\n\n    const touchPx = event.offsetX;\n    const ratio = touchPx / this.rangeWidth;\n    const value = this._absMax * ratio + this._min;\n    this.pointer.style.left = `${ratio * this.rangeWidth}px`;\n    this.subbar.style.right = `${(1 - ratio) * this.rangeWidth}px`;\n    this.value = value;\n    this.fire('change', value, true);\n  }\n\n  _startChangingSlide(event) {\n    this.firstPosition = event.screenX;\n    this.firstLeft = toInteger(this.pointer.style.left) || 0;\n    document.addEventListener('mousemove', this.eventHandler.changeSlide);\n    document.addEventListener('mouseup', this.eventHandler.stopChangingSlide);\n  }\n  /**\r\n   * stop change angle event\r\n   * @private\r\n   */\n\n\n  _stopChangingSlide() {\n    this.fire('change', this._value, true);\n    document.removeEventListener('mousemove', this.eventHandler.changeSlide);\n    document.removeEventListener('mouseup', this.eventHandler.stopChangingSlide);\n  }\n  /**\r\n   * Unnecessary string filtering.\r\n   * @param {string} inputValue - origin string of input\r\n   * @returns {string} filtered string\r\n   * @private\r\n   */\n\n\n  _filterForInputText(inputValue) {\n    return inputValue.replace(INPUT_FILTER_REGEXP, '$1$2$3');\n  }\n\n}\n\nsnippet.CustomEvents.mixin(Range);\nexport default Range;","map":{"version":3,"sources":["C:/Users/kkwan_000/Desktop/git/2017110269/minsung/src/js/ui/tools/range.js"],"names":["snippet","toInteger","clamp","keyCodes","INPUT_FILTER_REGEXP","Range","constructor","rangeElements","options","_value","value","rangeElement","slider","rangeInputElement","input","_drawRangeElement","rangeWidth","_getRangeWidth","_min","min","_max","max","_useDecimal","useDecimal","_absMax","realTimeEvent","eventHandler","startChangingSlide","_startChangingSlide","bind","stopChangingSlide","_stopChangingSlide","changeSlide","_changeSlide","changeSlideFinally","_changeSlideFinally","changeInput","_changeValueWithInput","changeInputFinally","changeInputWithArrow","_changeValueWithInputKeyEvent","_addClickEvent","_addDragEvent","_addInputEvent","trigger","destroy","_removeClickEvent","_removeDragEvent","_removeInputEvent","innerHTML","forEach","key","maxValue","absValue","leftPosition","pointer","style","left","subbar","right","type","fire","getElementWidth","element","window","getComputedStyle","width","classList","add","bar","document","createElement","className","appendChild","addEventListener","removeEventListener","event","keyCode","target","ARROW_UP","ARROW_DOWN","indexOf","Number","_valueUpDownForKeyEvent","unChanged","clampValue","step","isLast","stringValue","_filterForInputText","waitForChange","isNaN","changePosition","screenX","diffPosition","firstPosition","touchPx","firstLeft","ratio","resultValue","isValueChanged","stopPropagation","offsetX","inputValue","replace","CustomEvents","mixin"],"mappings":"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","sourcesContent":["import snippet from 'tui-code-snippet';\r\nimport { toInteger, clamp } from '../../util';\r\nimport { keyCodes } from '../../consts';\r\n\r\nconst INPUT_FILTER_REGEXP = /(-?)([0-9]*)[^0-9]*([0-9]*)/g;\r\n\r\n/**\r\n * Range control class\r\n * @class\r\n * @ignore\r\n */\r\nclass Range {\r\n  /**\r\n   * @constructor\r\n   * @extends {View}\r\n   * @param {Object} rangeElements - Html resources for creating sliders\r\n   *  @param {HTMLElement} rangeElements.slider - b\r\n   *  @param {HTMLElement} [rangeElements.input] - c\r\n   * @param {Object} options - Slider make options\r\n   *  @param {number} options.min - min value\r\n   *  @param {number} options.max - max value\r\n   *  @param {number} options.value - default value\r\n   *  @param {number} [options.useDecimal] - Decimal point processing.\r\n   *  @param {number} [options.realTimeEvent] - Reflect live events.\r\n   */\r\n  constructor(rangeElements, options = {}) {\r\n    this._value = options.value || 0;\r\n\r\n    this.rangeElement = rangeElements.slider;\r\n    this.rangeInputElement = rangeElements.input;\r\n\r\n    this._drawRangeElement();\r\n\r\n    this.rangeWidth = this._getRangeWidth();\r\n    this._min = options.min || 0;\r\n    this._max = options.max || 100;\r\n    this._useDecimal = options.useDecimal;\r\n    this._absMax = this._min * -1 + this._max;\r\n    this.realTimeEvent = options.realTimeEvent || false;\r\n\r\n    this.eventHandler = {\r\n      startChangingSlide: this._startChangingSlide.bind(this),\r\n      stopChangingSlide: this._stopChangingSlide.bind(this),\r\n      changeSlide: this._changeSlide.bind(this),\r\n      changeSlideFinally: this._changeSlideFinally.bind(this),\r\n      changeInput: this._changeValueWithInput.bind(this, false),\r\n      changeInputFinally: this._changeValueWithInput.bind(this, true),\r\n      changeInputWithArrow: this._changeValueWithInputKeyEvent.bind(this),\r\n    };\r\n\r\n    this._addClickEvent();\r\n    this._addDragEvent();\r\n    this._addInputEvent();\r\n    this.value = options.value;\r\n    this.trigger('change');\r\n  }\r\n\r\n  /**\r\n   * Destroys the instance.\r\n   */\r\n  destroy() {\r\n    this._removeClickEvent();\r\n    this._removeDragEvent();\r\n    this._removeInputEvent();\r\n    this.rangeElement.innerHTML = '';\r\n    snippet.forEach(this, (value, key) => {\r\n      this[key] = null;\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Set range max value and re position cursor\r\n   * @param {number} maxValue - max value\r\n   */\r\n  set max(maxValue) {\r\n    this._max = maxValue;\r\n    this._absMax = this._min * -1 + this._max;\r\n    this.value = this._value;\r\n  }\r\n\r\n  get max() {\r\n    return this._max;\r\n  }\r\n\r\n  /**\r\n   * Get range value\r\n   * @returns {Number} range value\r\n   */\r\n  get value() {\r\n    return this._value;\r\n  }\r\n\r\n  /**\r\n   * Set range value\r\n   * @param {Number} value range value\r\n   * @param {Boolean} fire whether fire custom event or not\r\n   */\r\n  set value(value) {\r\n    value = this._useDecimal ? value : toInteger(value);\r\n\r\n    const absValue = value - this._min;\r\n    let leftPosition = (absValue * this.rangeWidth) / this._absMax;\r\n\r\n    if (this.rangeWidth < leftPosition) {\r\n      leftPosition = this.rangeWidth;\r\n    }\r\n\r\n    this.pointer.style.left = `${leftPosition}px`;\r\n    this.subbar.style.right = `${this.rangeWidth - leftPosition}px`;\r\n\r\n    this._value = value;\r\n    if (this.rangeInputElement) {\r\n      this.rangeInputElement.value = value;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * event tirigger\r\n   * @param {string} type - type\r\n   */\r\n  trigger(type) {\r\n    this.fire(type, this._value);\r\n  }\r\n\r\n  /**\r\n   * Calculate slider width\r\n   * @returns {number} - slider width\r\n   */\r\n  _getRangeWidth() {\r\n    const getElementWidth = (element) => toInteger(window.getComputedStyle(element, null).width);\r\n\r\n    return getElementWidth(this.rangeElement) - getElementWidth(this.pointer);\r\n  }\r\n\r\n  /**\r\n   * Make range element\r\n   * @private\r\n   */\r\n  _drawRangeElement() {\r\n    this.rangeElement.classList.add('tui-image-editor-range');\r\n\r\n    this.bar = document.createElement('div');\r\n    this.bar.className = 'tui-image-editor-virtual-range-bar';\r\n\r\n    this.subbar = document.createElement('div');\r\n    this.subbar.className = 'tui-image-editor-virtual-range-subbar';\r\n\r\n    this.pointer = document.createElement('div');\r\n    this.pointer.className = 'tui-image-editor-virtual-range-pointer';\r\n\r\n    this.bar.appendChild(this.subbar);\r\n    this.bar.appendChild(this.pointer);\r\n    this.rangeElement.appendChild(this.bar);\r\n  }\r\n\r\n  /**\r\n   * Add range input editing event\r\n   * @private\r\n   */\r\n  _addInputEvent() {\r\n    if (this.rangeInputElement) {\r\n      this.rangeInputElement.addEventListener('keydown', this.eventHandler.changeInputWithArrow);\r\n      this.rangeInputElement.addEventListener('keyup', this.eventHandler.changeInput);\r\n      this.rangeInputElement.addEventListener('blur', this.eventHandler.changeInputFinally);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Remove range input editing event\r\n   * @private\r\n   */\r\n  _removeInputEvent() {\r\n    if (this.rangeInputElement) {\r\n      this.rangeInputElement.removeEventListener('keydown', this.eventHandler.changeInputWithArrow);\r\n      this.rangeInputElement.removeEventListener('keyup', this.eventHandler.changeInput);\r\n      this.rangeInputElement.removeEventListener('blur', this.eventHandler.changeInputFinally);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * change angle event\r\n   * @param {object} event - key event\r\n   * @private\r\n   */\r\n  _changeValueWithInputKeyEvent(event) {\r\n    const { keyCode, target } = event;\r\n\r\n    if ([keyCodes.ARROW_UP, keyCodes.ARROW_DOWN].indexOf(keyCode) < 0) {\r\n      return;\r\n    }\r\n\r\n    let value = Number(target.value);\r\n\r\n    value = this._valueUpDownForKeyEvent(value, keyCode);\r\n\r\n    const unChanged = value < this._min || value > this._max;\r\n\r\n    if (!unChanged) {\r\n      const clampValue = clamp(value, this._min, this.max);\r\n      this.value = clampValue;\r\n      this.fire('change', clampValue, false);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * value up down for input\r\n   * @param {number} value - original value number\r\n   * @param {number} keyCode - input event key code\r\n   * @returns {number} value - changed value\r\n   * @private\r\n   */\r\n  _valueUpDownForKeyEvent(value, keyCode) {\r\n    const step = this._useDecimal ? 0.1 : 1;\r\n\r\n    if (keyCode === keyCodes.ARROW_UP) {\r\n      value += step;\r\n    } else if (keyCode === keyCodes.ARROW_DOWN) {\r\n      value -= step;\r\n    }\r\n\r\n    return value;\r\n  }\r\n\r\n  /**\r\n   * change angle event\r\n   * @param {boolean} isLast - Is last change\r\n   * @param {object} event - key event\r\n   * @private\r\n   */\r\n  _changeValueWithInput(isLast, event) {\r\n    const { keyCode, target } = event;\r\n\r\n    if ([keyCodes.ARROW_UP, keyCodes.ARROW_DOWN].indexOf(keyCode) >= 0) {\r\n      return;\r\n    }\r\n\r\n    const stringValue = this._filterForInputText(target.value);\r\n    const waitForChange = !stringValue || isNaN(stringValue);\r\n    target.value = stringValue;\r\n\r\n    if (!waitForChange) {\r\n      let value = this._useDecimal ? Number(stringValue) : toInteger(stringValue);\r\n      value = clamp(value, this._min, this.max);\r\n\r\n      this.value = value;\r\n      this.fire('change', value, isLast);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Add Range click event\r\n   * @private\r\n   */\r\n  _addClickEvent() {\r\n    this.rangeElement.addEventListener('click', this.eventHandler.changeSlideFinally);\r\n  }\r\n\r\n  /**\r\n   * Remove Range click event\r\n   * @private\r\n   */\r\n  _removeClickEvent() {\r\n    this.rangeElement.removeEventListener('click', this.eventHandler.changeSlideFinally);\r\n  }\r\n\r\n  /**\r\n   * Add Range drag event\r\n   * @private\r\n   */\r\n  _addDragEvent() {\r\n    this.pointer.addEventListener('mousedown', this.eventHandler.startChangingSlide);\r\n  }\r\n\r\n  /**\r\n   * Remove Range drag event\r\n   * @private\r\n   */\r\n  _removeDragEvent() {\r\n    this.pointer.removeEventListener('mousedown', this.eventHandler.startChangingSlide);\r\n  }\r\n\r\n  /**\r\n   * change angle event\r\n   * @param {object} event - change event\r\n   * @private\r\n   */\r\n  _changeSlide(event) {\r\n    const changePosition = event.screenX;\r\n    const diffPosition = changePosition - this.firstPosition;\r\n    let touchPx = this.firstLeft + diffPosition;\r\n    touchPx = touchPx > this.rangeWidth ? this.rangeWidth : touchPx;\r\n    touchPx = touchPx < 0 ? 0 : touchPx;\r\n\r\n    this.pointer.style.left = `${touchPx}px`;\r\n    this.subbar.style.right = `${this.rangeWidth - touchPx}px`;\r\n\r\n    const ratio = touchPx / this.rangeWidth;\r\n    const resultValue = this._absMax * ratio + this._min;\r\n    const value = this._useDecimal ? resultValue : toInteger(resultValue);\r\n    const isValueChanged = this.value !== value;\r\n\r\n    if (isValueChanged) {\r\n      this.value = value;\r\n      if (this.realTimeEvent) {\r\n        this.fire('change', this._value, false);\r\n      }\r\n    }\r\n  }\r\n\r\n  _changeSlideFinally(event) {\r\n    event.stopPropagation();\r\n    if (event.target.className !== 'tui-image-editor-range') {\r\n      return;\r\n    }\r\n    const touchPx = event.offsetX;\r\n    const ratio = touchPx / this.rangeWidth;\r\n    const value = this._absMax * ratio + this._min;\r\n    this.pointer.style.left = `${ratio * this.rangeWidth}px`;\r\n    this.subbar.style.right = `${(1 - ratio) * this.rangeWidth}px`;\r\n    this.value = value;\r\n\r\n    this.fire('change', value, true);\r\n  }\r\n\r\n  _startChangingSlide(event) {\r\n    this.firstPosition = event.screenX;\r\n    this.firstLeft = toInteger(this.pointer.style.left) || 0;\r\n\r\n    document.addEventListener('mousemove', this.eventHandler.changeSlide);\r\n    document.addEventListener('mouseup', this.eventHandler.stopChangingSlide);\r\n  }\r\n\r\n  /**\r\n   * stop change angle event\r\n   * @private\r\n   */\r\n  _stopChangingSlide() {\r\n    this.fire('change', this._value, true);\r\n\r\n    document.removeEventListener('mousemove', this.eventHandler.changeSlide);\r\n    document.removeEventListener('mouseup', this.eventHandler.stopChangingSlide);\r\n  }\r\n\r\n  /**\r\n   * Unnecessary string filtering.\r\n   * @param {string} inputValue - origin string of input\r\n   * @returns {string} filtered string\r\n   * @private\r\n   */\r\n  _filterForInputText(inputValue) {\r\n    return inputValue.replace(INPUT_FILTER_REGEXP, '$1$2$3');\r\n  }\r\n}\r\n\r\nsnippet.CustomEvents.mixin(Range);\r\nexport default Range;\r\n"]},"metadata":{},"sourceType":"module"}