@spreadtheweb/multi-range-slider - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

babel.config.json

@@ -0,0 +0,0 @@ {

dist/range-slider.js

@@ -29,3 +29,3 @@ /*
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ RangeSlider)\n/* harmony export */ });\n/* harmony import */ var _range_slider_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./range-slider.css */ \"./src/range-slider.css\");\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n/*\r\n    This is a RangeSlider html component for one of my projects\r\n    It allows to have multiple points and different ranges of values with specified steps to jumb.\r\n    It has a easy api to customize sizes and colors of points, tracks, etc.\r\n    It has onChange method, which receives and callback and calls it with current values\r\n*/\n\n\nvar RangeSlider = /*#__PURE__*/function () {\n  /**\r\n   * Create slider\r\n   * @param  {string} selector\r\n   * @param  {object} props={}\r\n   */\n  function RangeSlider(selector) {\n    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n    _classCallCheck(this, RangeSlider);\n\n    this.defaultProps = {\n      values: [25, 75],\n      step: 1,\n      min: 0,\n      max: 100,\n      colors: {\n        points: \"rgb(25, 118, 210)\",\n        // ['red', 'green', 'blue']\n        rail: \"rgba(25, 118, 210, 0.4)\",\n        tracks: \"rgb(25, 118, 210)\" // // ['red', 'green']\n\n      },\n      pointRadius: 15,\n      railHeight: 5,\n      trackHeight: 5\n    };\n    this.allProps = _objectSpread(_objectSpread(_objectSpread({}, this.defaultProps), props), {}, {\n      values: _toConsumableArray(props.values || this.defaultProps.values),\n      colors: _objectSpread(_objectSpread({}, this.defaultProps.colors), props.colors)\n    });\n    this.container = this.initContainer(selector);\n    this.pointPositions = this.generatePointPositions();\n    this.possibleValues = this.generatePossibleValues();\n    this.jump = this.container.offsetWidth / Math.ceil((this.allProps.max - this.allProps.min) / this.allProps.step);\n    this.rail = this.initRail();\n    this.tracks = this.initTracks(this.allProps.values.length - 1);\n    this.tooltip = this.initTooltip();\n    this.points = this.initPoints(this.allProps.values.length);\n    this.drawScene();\n    this.documentMouseupHandler = this.documentMouseupHandler.bind(this);\n    this.documentMouseMoveHandler = this.documentMouseMoveHandler.bind(this);\n    this.selectedPointIndex = -1;\n    this.changeHandlers = [];\n    return this;\n  }\n  /**\r\n   * Draw all elements with initial positions\r\n   */\n\n\n  _createClass(RangeSlider, [{\n    key: \"drawScene\",\n    value: function drawScene() {\n      var _this = this;\n\n      this.container.classList.add(\"range-slider__container\");\n      this.container.appendChild(this.rail);\n      this.container.appendChild(this.tooltip);\n      this.tracks.forEach(function (track) {\n        return _this.container.appendChild(track);\n      });\n      this.points.forEach(function (point) {\n        return _this.container.appendChild(point);\n      });\n    }\n  }, {\n    key: \"generatePointPositions\",\n    value: function generatePointPositions() {\n      var _this2 = this;\n\n      return this.allProps.values.map(function (value) {\n        var percentage = value / _this2.allProps.max * 100;\n        return Math.floor(percentage / 100 * _this2.container.offsetWidth);\n      });\n    }\n    /**\r\n     * Generate all values that can slider have starting from min, to max increased by step\r\n     */\n\n  }, {\n    key: \"generatePossibleValues\",\n    value: function generatePossibleValues() {\n      var values = [];\n\n      for (var i = this.allProps.min; i <= this.allProps.max; i += this.allProps.step) {\n        values.push(Math.round(i * 100) / 100);\n      }\n\n      if (this.allProps.max % this.allProps.step > 0) {\n        values.push(Math.round(this.allProps.max * 100) / 100);\n      }\n\n      return values;\n    }\n    /**\r\n     * Initialize container\r\n     * @param  {string} selector\r\n     */\n\n  }, {\n    key: \"initContainer\",\n    value: function initContainer(selector) {\n      var container = document.querySelector(selector);\n      container.classList.add(\"range-slider__container\");\n      container.style.height = this.allProps.pointRadius * 2 + \"px\";\n      return container;\n    }\n    /**\r\n     * Initialize Rail\r\n     */\n\n  }, {\n    key: \"initRail\",\n    value: function initRail() {\n      var _this3 = this;\n\n      var rail = document.createElement(\"span\");\n      rail.classList.add(\"range-slider__rail\");\n      rail.style.background = this.allProps.colors.rail;\n      rail.style.height = this.allProps.railHeight + \"px\";\n      rail.style.top = this.allProps.pointRadius + \"px\";\n      rail.addEventListener(\"click\", function (e) {\n        return _this3.railClickHandler(e);\n      });\n      return rail;\n    }\n    /**\r\n     * Initialize all tracks (equal to number of points - 1)\r\n     * @param  {number} count\r\n     */\n\n  }, {\n    key: \"initTracks\",\n    value: function initTracks(count) {\n      var tracks = [];\n\n      for (var i = 0; i < count; i++) {\n        tracks.push(this.initTrack(i));\n      }\n\n      return tracks;\n    }\n    /**\r\n     * Initialize single track at specific index position\r\n     * @param  {number} index\r\n     */\n\n  }, {\n    key: \"initTrack\",\n    value: function initTrack(index) {\n      var _this4 = this;\n\n      var track = document.createElement(\"span\");\n      track.classList.add(\"range-slider__track\");\n      var trackPointPositions = this.pointPositions.slice(index, index + 2);\n      track.style.left = Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n      track.style.top = this.allProps.pointRadius + \"px\";\n      track.style.width = Math.max.apply(Math, _toConsumableArray(trackPointPositions)) - Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n      track.style.height = this.allProps.trackHeight + \"px\";\n      var trackColors = this.allProps.colors.tracks;\n      track.style.background = Array.isArray(trackColors) ? trackColors[index] || trackColors[trackColors.length - 1] : trackColors;\n      track.addEventListener(\"click\", function (e) {\n        return _this4.railClickHandler(e);\n      });\n      return track;\n    }\n    /**\r\n     * Initialize all points (equal to number of values)\r\n     * @param  {number} count\r\n     */\n\n  }, {\n    key: \"initPoints\",\n    value: function initPoints(count) {\n      var points = [];\n\n      for (var i = 0; i < count; i++) {\n        points.push(this.initPoint(i));\n      }\n\n      return points;\n    }\n    /**\r\n     * Initialize single track at specific index position\r\n     * @param  {number} index\r\n     */\n\n  }, {\n    key: \"initPoint\",\n    value: function initPoint(index) {\n      var _this5 = this;\n\n      var point = document.createElement(\"span\");\n      point.classList.add(\"range-slider__point\");\n      point.style.width = this.allProps.pointRadius * 2 + \"px\";\n      point.style.height = this.allProps.pointRadius * 2 + \"px\";\n      point.style.left = \"\".concat(this.pointPositions[index] / this.container.offsetWidth * 100, \"%\");\n      var pointColors = this.allProps.colors.points;\n      point.style.background = Array.isArray(pointColors) ? pointColors[index] || pointColors[pointColors.length - 1] : pointColors;\n      point.addEventListener(\"mousedown\", function (e) {\n        return _this5.pointClickHandler(e, index);\n      });\n      point.addEventListener(\"mouseover\", function (e) {\n        return _this5.pointMouseoverHandler(e, index);\n      });\n      point.addEventListener(\"mouseout\", function (e) {\n        return _this5.pointMouseOutHandler(e, index);\n      });\n      return point;\n    }\n    /**\r\n     * Initialize tooltip\r\n     */\n\n  }, {\n    key: \"initTooltip\",\n    value: function initTooltip() {\n      var tooltip = document.createElement(\"span\");\n      tooltip.classList.add(\"range-slider__tooltip\");\n      tooltip.style.fontSize = this.allProps.pointRadius + \"px\";\n      return tooltip;\n    }\n    /**\r\n     * Draw points, tracks and tooltip (on rail click or on drag)\r\n     */\n\n  }, {\n    key: \"draw\",\n    value: function draw() {\n      var _this6 = this;\n\n      this.points.forEach(function (point, i) {\n        point.style.left = \"\".concat(_this6.pointPositions[i] / _this6.container.offsetWidth * 100, \"%\");\n      });\n      this.tracks.forEach(function (track, i) {\n        var trackPointPositions = _this6.pointPositions.slice(i, i + 2);\n\n        track.style.left = Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n        track.style.width = Math.max.apply(Math, _toConsumableArray(trackPointPositions)) - Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n      });\n      this.tooltip.style.left = this.pointPositions[this.selectedPointIndex] + \"px\";\n      this.tooltip.textContent = this.allProps.values[this.selectedPointIndex];\n    }\n    /**\r\n     * Redraw on rail click\r\n     * @param  {Event} e\r\n     */\n\n  }, {\n    key: \"railClickHandler\",\n    value: function railClickHandler(e) {\n      var newPosition = this.getMouseRelativePosition(e.pageX);\n      var closestPositionIndex = this.getClosestPointIndex(newPosition);\n      this.pointPositions[closestPositionIndex] = newPosition;\n      this.draw();\n    }\n    /**\r\n     * Find the closest possible point position fro current mouse position\r\n     * in order to move the point\r\n     * @param  {number} mousePoisition\r\n     */\n\n  }, {\n    key: \"getClosestPointIndex\",\n    value: function getClosestPointIndex(mousePoisition) {\n      var shortestDistance = Infinity;\n      var index = 0;\n\n      for (var i in this.pointPositions) {\n        var dist = Math.abs(mousePoisition - this.pointPositions[i]);\n\n        if (shortestDistance > dist) {\n          shortestDistance = dist;\n          index = i;\n        }\n      }\n\n      return index;\n    }\n    /**\r\n     * Stop point moving on mouse up\r\n     */\n\n  }, {\n    key: \"documentMouseupHandler\",\n    value: function documentMouseupHandler() {\n      var _this7 = this;\n\n      this.changeHandlers.forEach(function (func) {\n        return func(_this7.allProps.values);\n      });\n      this.points[this.selectedPointIndex].style.boxShadow = \"none\";\n      this.selectedPointIndex = -1;\n      this.tooltip.style.transform = \"translate(-50%, -60%) scale(0)\";\n      document.removeEventListener(\"mouseup\", this.documentMouseupHandler);\n      document.removeEventListener(\"mousemove\", this.documentMouseMoveHandler);\n    }\n    /**\r\n     * Start point moving on mouse move\r\n     * @param {Event} e\r\n     */\n\n  }, {\n    key: \"documentMouseMoveHandler\",\n    value: function documentMouseMoveHandler(e) {\n      var newPoisition = this.getMouseRelativePosition(e.pageX);\n      var extra = Math.floor(newPoisition % this.jump);\n\n      if (extra > this.jump / 2) {\n        newPoisition += this.jump - extra;\n      } else {\n        newPoisition -= extra;\n      }\n\n      if (newPoisition < 0) {\n        newPoisition = 0;\n      } else if (newPoisition > this.container.offsetWidth) {\n        newPoisition = this.container.offsetWidth;\n      }\n\n      this.pointPositions[this.selectedPointIndex] = newPoisition;\n      this.allProps.values[this.selectedPointIndex] = this.possibleValues[Math.floor(newPoisition / this.jump)];\n      this.draw();\n    }\n    /**\r\n     * Register document listeners on point click\r\n     * and save clicked point index\r\n     * @param {Event} e\r\n     */\n\n  }, {\n    key: \"pointClickHandler\",\n    value: function pointClickHandler(e, index) {\n      e.preventDefault();\n      this.selectedPointIndex = index;\n      document.addEventListener(\"mouseup\", this.documentMouseupHandler);\n      document.addEventListener(\"mousemove\", this.documentMouseMoveHandler);\n    }\n    /**\r\n     * Point mouse over box shadow and tooltip displaying\r\n     * @param {Event} e\r\n     * @param {number} index\r\n     */\n\n  }, {\n    key: \"pointMouseoverHandler\",\n    value: function pointMouseoverHandler(e, index) {\n      var transparentColor = RangeSlider.addTransparencyToColor(this.points[index].style.backgroundColor, 16);\n\n      if (this.selectedPointIndex < 0) {\n        this.points[index].style.boxShadow = \"0px 0px 0px \".concat(Math.floor(this.allProps.pointRadius / 1.5), \"px \").concat(transparentColor);\n      }\n\n      this.tooltip.style.transform = \"translate(-50%, -60%) scale(1)\";\n      this.tooltip.style.left = this.pointPositions[index] + \"px\";\n      this.tooltip.textContent = this.allProps.values[index];\n    }\n    /**\r\n     * Add transparency for rgb, rgba or hex color\r\n     * @param {string} color\r\n     * @param {number} percentage\r\n     */\n\n  }, {\n    key: \"pointMouseOutHandler\",\n    value:\n    /**\r\n     * Hide shadow and tooltip on mouse out\r\n     * @param {Event} e\r\n     * @param {number} index\r\n     */\n    function pointMouseOutHandler(e, index) {\n      if (this.selectedPointIndex < 0) {\n        this.points[index].style.boxShadow = \"none\";\n        this.tooltip.style.transform = \"translate(-50%, -60%) scale(0)\";\n      }\n    }\n    /**\r\n     * Get mouse position relatively from containers left position on the page\r\n     */\n\n  }, {\n    key: \"getMouseRelativePosition\",\n    value: function getMouseRelativePosition(pageX) {\n      return pageX - this.container.offsetLeft;\n    }\n    /**\r\n     * Register onChange callback to call it on slider move end passing all the present values\r\n     */\n\n  }, {\n    key: \"onChange\",\n    value: function onChange(func) {\n      if (typeof func !== \"function\") {\n        throw new Error(\"Please provide function as onChange callback\");\n      }\n\n      this.changeHandlers.push(func);\n      return this;\n    }\n  }], [{\n    key: \"addTransparencyToColor\",\n    value: function addTransparencyToColor(color, percentage) {\n      if (color.startsWith(\"rgba\")) {\n        return color.replace(/(\\d+)(?!.*\\d)/, percentage + \"%\");\n      }\n\n      if (color.startsWith(\"rgb\")) {\n        var newColor = color.replace(/(\\))(?!.*\\))/, \", \".concat(percentage, \"%)\"));\n        return newColor.replace(\"rgb\", \"rgba\");\n      }\n\n      if (color.startsWith(\"#\")) {\n        return color + percentage.toString(16);\n      }\n\n      return color;\n    }\n  }]);\n\n  return RangeSlider;\n}();\n\n\n\n//# sourceURL=webpack://RangeSlider/./src/range-slider.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ RangeSlider)\n/* harmony export */ });\n/* harmony import */ var _range_slider_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./range-slider.css */ \"./src/range-slider.css\");\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n/*\n    This is a RangeSlider html component for one of my projects\n    It allows to have multiple points and different ranges of values with specified steps to jumb.\n    It has a easy api to customize sizes and colors of points, tracks, etc.\n    It has onChange method, which receives and callback and calls it with current values\n*/\n\n\nvar RangeSlider = /*#__PURE__*/function () {\n  /**\n   * Create slider\n   * @param  {string} selector\n   * @param  {object} props={}\n   */\n  function RangeSlider(selector) {\n    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n    _classCallCheck(this, RangeSlider);\n\n    this.defaultProps = {\n      values: [25, 75],\n      step: 1,\n      min: 0,\n      max: 100,\n      colors: {\n        points: \"rgb(25, 118, 210)\",\n        // ['red', 'green', 'blue']\n        rail: \"rgba(25, 118, 210, 0.4)\",\n        tracks: \"rgb(25, 118, 210)\" // // ['red', 'green']\n\n      },\n      pointRadius: 15,\n      railHeight: 5,\n      trackHeight: 5,\n      tooltipHandler: null\n    };\n    this.allProps = _objectSpread(_objectSpread(_objectSpread({}, this.defaultProps), props), {}, {\n      values: _toConsumableArray(props.values || this.defaultProps.values),\n      colors: _objectSpread(_objectSpread({}, this.defaultProps.colors), props.colors)\n    });\n    this.container = this.initContainer(selector);\n    this.pointPositions = this.generatePointPositions();\n    this.possibleValues = this.generatePossibleValues();\n    this.jump = this.container.offsetWidth / Math.ceil((this.allProps.max - this.allProps.min) / this.allProps.step);\n    this.rail = this.initRail();\n    this.tracks = this.initTracks(this.allProps.values.length - 1);\n    this.tooltip = this.initTooltip();\n    this.points = this.initPoints(this.allProps.values.length);\n    this.drawScene();\n    this.documentMouseupHandler = this.documentMouseupHandler.bind(this);\n    this.documentMouseMoveHandler = this.documentMouseMoveHandler.bind(this);\n    this.selectedPointIndex = -1;\n    this.changeHandlers = [];\n    return this;\n  }\n  /**\n   * Draw all elements with initial positions\n   */\n\n\n  _createClass(RangeSlider, [{\n    key: \"drawScene\",\n    value: function drawScene() {\n      var _this = this;\n\n      this.container.classList.add(\"range-slider__container\");\n      this.container.appendChild(this.rail);\n      this.container.appendChild(this.tooltip);\n      this.tracks.forEach(function (track) {\n        return _this.container.appendChild(track);\n      });\n      this.points.forEach(function (point) {\n        return _this.container.appendChild(point);\n      });\n    }\n  }, {\n    key: \"generatePointPositions\",\n    value: function generatePointPositions() {\n      var _this3 = this;\n\n      return this.allProps.values.map(function (value) {\n        var percentage = (value - _this2.allProps.min) / (_this2.allProps.max - _this2.allProps.min) * 100;\n        return Math.floor(percentage / 100 * _this3.container.offsetWidth);\n      });\n    }\n    /**\n     * Generate all values that can slider have starting from min, to max increased by step\n     */\n\n  }, {\n    key: \"generatePossibleValues\",\n    value: function generatePossibleValues() {\n      var values = [];\n\n      for (var i = this.allProps.min; i <= this.allProps.max; i += this.allProps.step) {\n        values.push(Math.round(i * 100) / 100);\n      }\n\n      if (this.allProps.max % this.allProps.step > 0) {\n        values.push(Math.round(this.allProps.max * 100) / 100);\n      }\n\n      return values;\n    }\n    /**\n     * Initialize container\n     * @param  {string} selector\n     */\n\n  }, {\n    key: \"initContainer\",\n    value: function initContainer(selector) {\n      var container = selector instanceof HTMLElement ? selector : document.querySelector(selector);\n      container.classList.add(\"range-slider__container\");\n      container.style.height = this.allProps.pointRadius * 2 + \"px\";\n      return container;\n    }\n    /**\n     * Initialize Rail\n     */\n\n  }, {\n    key: \"initRail\",\n    value: function initRail() {\n      var _this4 = this;\n\n      var rail = document.createElement(\"span\");\n      rail.classList.add(\"range-slider__rail\");\n      rail.style.background = this.allProps.colors.rail;\n      rail.style.height = this.allProps.railHeight + \"px\";\n      rail.style.top = this.allProps.pointRadius + \"px\";\n      rail.addEventListener(\"click\", function (e) {\n        return _this4.railClickHandler(e);\n      });\n      return rail;\n    }\n    /**\n     * Initialize all tracks (equal to number of points - 1)\n     * @param  {number} count\n     */\n\n  }, {\n    key: \"initTracks\",\n    value: function initTracks(count) {\n      var tracks = [];\n\n      for (var i = 0; i < count; i++) {\n        tracks.push(this.initTrack(i));\n      }\n\n      return tracks;\n    }\n    /**\n     * Initialize single track at specific index position\n     * @param  {number} index\n     */\n\n  }, {\n    key: \"initTrack\",\n    value: function initTrack(index) {\n      var _this5 = this;\n\n      var track = document.createElement(\"span\");\n      track.classList.add(\"range-slider__track\");\n      var trackPointPositions = this.pointPositions.slice(index, index + 2);\n      track.style.left = Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n      track.style.top = this.allProps.pointRadius + \"px\";\n      track.style.width = Math.max.apply(Math, _toConsumableArray(trackPointPositions)) - Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n      track.style.height = this.allProps.trackHeight + \"px\";\n      var trackColors = this.allProps.colors.tracks;\n      track.style.background = Array.isArray(trackColors) ? trackColors[index] || trackColors[trackColors.length - 1] : trackColors;\n      track.addEventListener(\"click\", function (e) {\n        return _this5.railClickHandler(e);\n      });\n      return track;\n    }\n    /**\n     * Initialize all points (equal to number of values)\n     * @param  {number} count\n     */\n\n  }, {\n    key: \"initPoints\",\n    value: function initPoints(count) {\n      var points = [];\n\n      for (var i = 0; i < count; i++) {\n        points.push(this.initPoint(i));\n      }\n\n      return points;\n    }\n    /**\n     * Initialize single track at specific index position\n     * @param  {number} index\n     */\n\n  }, {\n    key: \"initPoint\",\n    value: function initPoint(index) {\n      var _this6 = this;\n\n      var point = document.createElement(\"span\");\n      point.classList.add(\"range-slider__point\");\n      point.style.width = this.allProps.pointRadius * 2 + \"px\";\n      point.style.height = this.allProps.pointRadius * 2 + \"px\";\n      point.style.left = \"\".concat(this.pointPositions[index] / this.container.offsetWidth * 100, \"%\");\n      var pointColors = this.allProps.colors.points;\n      point.style.background = Array.isArray(pointColors) ? pointColors[index] || pointColors[pointColors.length - 1] : pointColors;\n      point.addEventListener(\"mousedown\", function (e) {\n        return _this6.pointClickHandler(e, index);\n      });\n      point.addEventListener(\"mouseover\", function (e) {\n        return _this6.pointMouseoverHandler(e, index);\n      });\n      point.addEventListener(\"mouseout\", function (e) {\n        return _this6.pointMouseOutHandler(e, index);\n      });\n      return point;\n    }\n    /**\n     * Initialize tooltip\n     */\n\n  }, {\n    key: \"initTooltip\",\n    value: function initTooltip() {\n      var tooltip = document.createElement(\"span\");\n      tooltip.classList.add(\"range-slider__tooltip\");\n      tooltip.style.fontSize = this.allProps.pointRadius + \"px\";\n      return tooltip;\n    }\n    /**\n     * Draw points, tracks and tooltip (on rail click or on drag)\n     */\n\n  }, {\n    key: \"draw\",\n    value: function draw() {\n      var _this7 = this;\n\n      this.points.forEach(function (point, i) {\n        point.style.left = \"\".concat(_this7.pointPositions[i] / _this7.container.offsetWidth * 100, \"%\");\n      });\n      this.tracks.forEach(function (track, i) {\n        var trackPointPositions = _this7.pointPositions.slice(i, i + 2);\n\n        track.style.left = Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n        track.style.width = Math.max.apply(Math, _toConsumableArray(trackPointPositions)) - Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n      });\n      this.tooltip.style.left = this.pointPositions[this.selectedPointIndex] + \"px\";\n      var content = this.allProps.values[this.selectedPointIndex];\n\n      if (this.allProps.tooltipHandler !== null) {\n        content = this.allProps.tooltipHandler(content);\n      }\n\n      this.tooltip.textContent = content;\n    }\n    /**\n     * Redraw on rail click\n     * @param  {Event} e\n     */\n\n  }, {\n    key: \"railClickHandler\",\n    value: function railClickHandler(e) {\n      var newPosition = this.getMouseRelativePosition(e.pageX);\n      var closestPositionIndex = this.getClosestPointIndex(newPosition);\n      this.pointPositions[closestPositionIndex] = newPosition;\n      this.draw();\n    }\n    /**\n     * Find the closest possible point position fro current mouse position\n     * in order to move the point\n     * @param  {number} mousePoisition\n     */\n\n  }, {\n    key: \"getClosestPointIndex\",\n    value: function getClosestPointIndex(mousePoisition) {\n      var shortestDistance = Infinity;\n      var index = 0;\n\n      for (var i in this.pointPositions) {\n        var dist = Math.abs(mousePoisition - this.pointPositions[i]);\n\n        if (shortestDistance > dist) {\n          shortestDistance = dist;\n          index = i;\n        }\n      }\n\n      return index;\n    }\n    /**\n     * Stop point moving on mouse up\n     */\n\n  }, {\n    key: \"documentMouseupHandler\",\n    value: function documentMouseupHandler() {\n      var _this8 = this;\n\n      this.changeHandlers.forEach(function (func) {\n        return func(_this8.allProps.values);\n      });\n      this.points[this.selectedPointIndex].style.boxShadow = \"none\";\n      this.selectedPointIndex = -1;\n      this.tooltip.style.transform = \"translate(-50%, -60%) scale(0)\";\n      document.removeEventListener(\"mouseup\", this.documentMouseupHandler);\n      document.removeEventListener(\"mousemove\", this.documentMouseMoveHandler);\n    }\n    /**\n     * Start point moving on mouse move\n     * @param {Event} e\n     */\n\n  }, {\n    key: \"documentMouseMoveHandler\",\n    value: function documentMouseMoveHandler(e) {\n      var newPoisition = this.getMouseRelativePosition(e.pageX);\n      var extra = Math.floor(newPoisition % this.jump);\n\n      if (extra > this.jump / 2) {\n        newPoisition += this.jump - extra;\n      } else {\n        newPoisition -= extra;\n      }\n\n      if (newPoisition < 0) {\n        newPoisition = 0;\n      } else if (newPoisition > this.container.offsetWidth) {\n        newPoisition = this.container.offsetWidth;\n      }\n\n      this.pointPositions[this.selectedPointIndex] = newPoisition;\n      this.allProps.values[this.selectedPointIndex] = this.possibleValues[Math.floor(newPoisition / this.jump)];\n      this.draw();\n    }\n    /**\n     * Register document listeners on point click\n     * and save clicked point index\n     * @param {Event} e\n     */\n\n  }, {\n    key: \"pointClickHandler\",\n    value: function pointClickHandler(e, index) {\n      e.preventDefault();\n      this.selectedPointIndex = index;\n      document.addEventListener(\"mouseup\", this.documentMouseupHandler);\n      document.addEventListener(\"mousemove\", this.documentMouseMoveHandler);\n    }\n    /**\n     * Point mouse over box shadow and tooltip displaying\n     * @param {Event} e\n     * @param {number} index\n     */\n\n  }, {\n    key: \"pointMouseoverHandler\",\n    value: function pointMouseoverHandler(e, index) {\n      var transparentColor = RangeSlider.addTransparencyToColor(this.points[index].style.backgroundColor, 16);\n\n      if (this.selectedPointIndex < 0) {\n        this.points[index].style.boxShadow = \"0px 0px 0px \".concat(Math.floor(this.allProps.pointRadius / 1.5), \"px \").concat(transparentColor);\n      }\n\n      this.tooltip.style.transform = \"translate(-50%, -60%) scale(1)\";\n      this.tooltip.style.left = this.pointPositions[index] + \"px\";\n      var content = this.allProps.values[index];\n\n      if (this.allProps.tooltipHandler !== null) {\n        content = this.allProps.tooltipHandler(content);\n      }\n\n      this.tooltip.textContent = content;\n    }\n    /**\n     * Add transparency for rgb, rgba or hex color\n     * @param {string} color\n     * @param {number} percentage\n     */\n\n  }, {\n    key: \"pointMouseOutHandler\",\n    value:\n    /**\n     * Hide shadow and tooltip on mouse out\n     * @param {Event} e\n     * @param {number} index\n     */\n    function pointMouseOutHandler(e, index) {\n      if (this.selectedPointIndex < 0) {\n        this.points[index].style.boxShadow = \"none\";\n        this.tooltip.style.transform = \"translate(-50%, -60%) scale(0)\";\n      }\n    }\n    /**\n     * Get mouse position relatively from containers left position on the page\n     */\n\n  }, {\n    key: \"getMouseRelativePosition\",\n    value: function getMouseRelativePosition(pageX) {\n      var containerPosition = this.container.getBoundingClientRect();\n      return pageX - containerPosition.left;\n    }\n    /**\n     * Register onChange callback to call it on slider move end passing all the present values\n     */\n\n  }, {\n    key: \"onChange\",\n    value: function onChange(func) {\n      if (typeof func !== \"function\") {\n        throw new Error(\"Please provide function as onChange callback\");\n      }\n\n      this.changeHandlers.push(func);\n      return this;\n    }\n  }], [{\n    key: \"addTransparencyToColor\",\n    value: function addTransparencyToColor(color, percentage) {\n      if (color.startsWith(\"rgba\")) {\n        return color.replace(/(\\d+)(?!.*\\d)/, percentage + \"%\");\n      }\n\n      if (color.startsWith(\"rgb\")) {\n        var newColor = color.replace(/(\\))(?!.*\\))/, \", \".concat(percentage, \"%)\"));\n        return newColor.replace(\"rgb\", \"rgba\");\n      }\n\n      if (color.startsWith(\"#\")) {\n        return color + percentage.toString(16);\n      }\n\n      return color;\n    }\n  }]);\n\n  return RangeSlider;\n}();\n\n\n\n//# sourceURL=webpack://RangeSlider/./src/range-slider.js?");
 
@@ -32,0 +32,0 @@ /***/ }),

dist/range-slider.main.js

@@ -29,3 +29,3 @@ /*
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ RangeSlider)\n/* harmony export */ });\n/* harmony import */ var _range_slider_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./range-slider.css */ \"./src/range-slider.css\");\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n/*\r\n    This is a RangeSlider html component for one of my projects\r\n    It allows to have multiple points and different ranges of values with specified steps to jumb.\r\n    It has a easy api to customize sizes and colors of points, tracks, etc.\r\n    It has onChange method, which receives and callback and calls it with current values\r\n*/\n\n\nvar RangeSlider = /*#__PURE__*/function () {\n  /**\r\n   * Create slider\r\n   * @param  {string} selector\r\n   * @param  {object} props={}\r\n   */\n  function RangeSlider(selector) {\n    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n    _classCallCheck(this, RangeSlider);\n\n    this.defaultProps = {\n      values: [25, 75],\n      step: 1,\n      min: 0,\n      max: 100,\n      colors: {\n        points: \"rgb(25, 118, 210)\",\n        // ['red', 'green', 'blue']\n        rail: \"rgba(25, 118, 210, 0.4)\",\n        tracks: \"rgb(25, 118, 210)\" // // ['red', 'green']\n\n      },\n      pointRadius: 15,\n      railHeight: 5,\n      trackHeight: 5\n    };\n    this.allProps = _objectSpread(_objectSpread(_objectSpread({}, this.defaultProps), props), {}, {\n      values: _toConsumableArray(props.values || this.defaultProps.values),\n      colors: _objectSpread(_objectSpread({}, this.defaultProps.colors), props.colors)\n    });\n    this.container = this.initContainer(selector);\n    this.pointPositions = this.generatePointPositions();\n    this.possibleValues = this.generatePossibleValues();\n    this.jump = this.container.offsetWidth / Math.ceil((this.allProps.max - this.allProps.min) / this.allProps.step);\n    this.rail = this.initRail();\n    this.tracks = this.initTracks(this.allProps.values.length - 1);\n    this.tooltip = this.initTooltip();\n    this.points = this.initPoints(this.allProps.values.length);\n    this.drawScene();\n    this.documentMouseupHandler = this.documentMouseupHandler.bind(this);\n    this.documentMouseMoveHandler = this.documentMouseMoveHandler.bind(this);\n    this.selectedPointIndex = -1;\n    this.changeHandlers = [];\n    return this;\n  }\n  /**\r\n   * Draw all elements with initial positions\r\n   */\n\n\n  _createClass(RangeSlider, [{\n    key: \"drawScene\",\n    value: function drawScene() {\n      var _this = this;\n\n      this.container.classList.add(\"range-slider__container\");\n      this.container.appendChild(this.rail);\n      this.container.appendChild(this.tooltip);\n      this.tracks.forEach(function (track) {\n        return _this.container.appendChild(track);\n      });\n      this.points.forEach(function (point) {\n        return _this.container.appendChild(point);\n      });\n    }\n  }, {\n    key: \"generatePointPositions\",\n    value: function generatePointPositions() {\n      var _this2 = this;\n\n      return this.allProps.values.map(function (value) {\n        var percentage = value / _this2.allProps.max * 100;\n        return Math.floor(percentage / 100 * _this2.container.offsetWidth);\n      });\n    }\n    /**\r\n     * Generate all values that can slider have starting from min, to max increased by step\r\n     */\n\n  }, {\n    key: \"generatePossibleValues\",\n    value: function generatePossibleValues() {\n      var values = [];\n\n      for (var i = this.allProps.min; i <= this.allProps.max; i += this.allProps.step) {\n        values.push(Math.round(i * 100) / 100);\n      }\n\n      if (this.allProps.max % this.allProps.step > 0) {\n        values.push(Math.round(this.allProps.max * 100) / 100);\n      }\n\n      return values;\n    }\n    /**\r\n     * Initialize container\r\n     * @param  {string} selector\r\n     */\n\n  }, {\n    key: \"initContainer\",\n    value: function initContainer(selector) {\n      var container = document.querySelector(selector);\n      container.classList.add(\"range-slider__container\");\n      container.style.height = this.allProps.pointRadius * 2 + \"px\";\n      return container;\n    }\n    /**\r\n     * Initialize Rail\r\n     */\n\n  }, {\n    key: \"initRail\",\n    value: function initRail() {\n      var _this3 = this;\n\n      var rail = document.createElement(\"span\");\n      rail.classList.add(\"range-slider__rail\");\n      rail.style.background = this.allProps.colors.rail;\n      rail.style.height = this.allProps.railHeight + \"px\";\n      rail.style.top = this.allProps.pointRadius + \"px\";\n      rail.addEventListener(\"click\", function (e) {\n        return _this3.railClickHandler(e);\n      });\n      return rail;\n    }\n    /**\r\n     * Initialize all tracks (equal to number of points - 1)\r\n     * @param  {number} count\r\n     */\n\n  }, {\n    key: \"initTracks\",\n    value: function initTracks(count) {\n      var tracks = [];\n\n      for (var i = 0; i < count; i++) {\n        tracks.push(this.initTrack(i));\n      }\n\n      return tracks;\n    }\n    /**\r\n     * Initialize single track at specific index position\r\n     * @param  {number} index\r\n     */\n\n  }, {\n    key: \"initTrack\",\n    value: function initTrack(index) {\n      var _this4 = this;\n\n      var track = document.createElement(\"span\");\n      track.classList.add(\"range-slider__track\");\n      var trackPointPositions = this.pointPositions.slice(index, index + 2);\n      track.style.left = Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n      track.style.top = this.allProps.pointRadius + \"px\";\n      track.style.width = Math.max.apply(Math, _toConsumableArray(trackPointPositions)) - Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n      track.style.height = this.allProps.trackHeight + \"px\";\n      var trackColors = this.allProps.colors.tracks;\n      track.style.background = Array.isArray(trackColors) ? trackColors[index] || trackColors[trackColors.length - 1] : trackColors;\n      track.addEventListener(\"click\", function (e) {\n        return _this4.railClickHandler(e);\n      });\n      return track;\n    }\n    /**\r\n     * Initialize all points (equal to number of values)\r\n     * @param  {number} count\r\n     */\n\n  }, {\n    key: \"initPoints\",\n    value: function initPoints(count) {\n      var points = [];\n\n      for (var i = 0; i < count; i++) {\n        points.push(this.initPoint(i));\n      }\n\n      return points;\n    }\n    /**\r\n     * Initialize single track at specific index position\r\n     * @param  {number} index\r\n     */\n\n  }, {\n    key: \"initPoint\",\n    value: function initPoint(index) {\n      var _this5 = this;\n\n      var point = document.createElement(\"span\");\n      point.classList.add(\"range-slider__point\");\n      point.style.width = this.allProps.pointRadius * 2 + \"px\";\n      point.style.height = this.allProps.pointRadius * 2 + \"px\";\n      point.style.left = \"\".concat(this.pointPositions[index] / this.container.offsetWidth * 100, \"%\");\n      var pointColors = this.allProps.colors.points;\n      point.style.background = Array.isArray(pointColors) ? pointColors[index] || pointColors[pointColors.length - 1] : pointColors;\n      point.addEventListener(\"mousedown\", function (e) {\n        return _this5.pointClickHandler(e, index);\n      });\n      point.addEventListener(\"mouseover\", function (e) {\n        return _this5.pointMouseoverHandler(e, index);\n      });\n      point.addEventListener(\"mouseout\", function (e) {\n        return _this5.pointMouseOutHandler(e, index);\n      });\n      return point;\n    }\n    /**\r\n     * Initialize tooltip\r\n     */\n\n  }, {\n    key: \"initTooltip\",\n    value: function initTooltip() {\n      var tooltip = document.createElement(\"span\");\n      tooltip.classList.add(\"range-slider__tooltip\");\n      tooltip.style.fontSize = this.allProps.pointRadius + \"px\";\n      return tooltip;\n    }\n    /**\r\n     * Draw points, tracks and tooltip (on rail click or on drag)\r\n     */\n\n  }, {\n    key: \"draw\",\n    value: function draw() {\n      var _this6 = this;\n\n      this.points.forEach(function (point, i) {\n        point.style.left = \"\".concat(_this6.pointPositions[i] / _this6.container.offsetWidth * 100, \"%\");\n      });\n      this.tracks.forEach(function (track, i) {\n        var trackPointPositions = _this6.pointPositions.slice(i, i + 2);\n\n        track.style.left = Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n        track.style.width = Math.max.apply(Math, _toConsumableArray(trackPointPositions)) - Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n      });\n      this.tooltip.style.left = this.pointPositions[this.selectedPointIndex] + \"px\";\n      this.tooltip.textContent = this.allProps.values[this.selectedPointIndex];\n    }\n    /**\r\n     * Redraw on rail click\r\n     * @param  {Event} e\r\n     */\n\n  }, {\n    key: \"railClickHandler\",\n    value: function railClickHandler(e) {\n      var newPosition = this.getMouseRelativePosition(e.pageX);\n      var closestPositionIndex = this.getClosestPointIndex(newPosition);\n      this.pointPositions[closestPositionIndex] = newPosition;\n      this.draw();\n    }\n    /**\r\n     * Find the closest possible point position fro current mouse position\r\n     * in order to move the point\r\n     * @param  {number} mousePoisition\r\n     */\n\n  }, {\n    key: \"getClosestPointIndex\",\n    value: function getClosestPointIndex(mousePoisition) {\n      var shortestDistance = Infinity;\n      var index = 0;\n\n      for (var i in this.pointPositions) {\n        var dist = Math.abs(mousePoisition - this.pointPositions[i]);\n\n        if (shortestDistance > dist) {\n          shortestDistance = dist;\n          index = i;\n        }\n      }\n\n      return index;\n    }\n    /**\r\n     * Stop point moving on mouse up\r\n     */\n\n  }, {\n    key: \"documentMouseupHandler\",\n    value: function documentMouseupHandler() {\n      var _this7 = this;\n\n      this.changeHandlers.forEach(function (func) {\n        return func(_this7.allProps.values);\n      });\n      this.points[this.selectedPointIndex].style.boxShadow = \"none\";\n      this.selectedPointIndex = -1;\n      this.tooltip.style.transform = \"translate(-50%, -60%) scale(0)\";\n      document.removeEventListener(\"mouseup\", this.documentMouseupHandler);\n      document.removeEventListener(\"mousemove\", this.documentMouseMoveHandler);\n    }\n    /**\r\n     * Start point moving on mouse move\r\n     * @param {Event} e\r\n     */\n\n  }, {\n    key: \"documentMouseMoveHandler\",\n    value: function documentMouseMoveHandler(e) {\n      var newPoisition = this.getMouseRelativePosition(e.pageX);\n      var extra = Math.floor(newPoisition % this.jump);\n\n      if (extra > this.jump / 2) {\n        newPoisition += this.jump - extra;\n      } else {\n        newPoisition -= extra;\n      }\n\n      if (newPoisition < 0) {\n        newPoisition = 0;\n      } else if (newPoisition > this.container.offsetWidth) {\n        newPoisition = this.container.offsetWidth;\n      }\n\n      this.pointPositions[this.selectedPointIndex] = newPoisition;\n      this.allProps.values[this.selectedPointIndex] = this.possibleValues[Math.floor(newPoisition / this.jump)];\n      this.draw();\n    }\n    /**\r\n     * Register document listeners on point click\r\n     * and save clicked point index\r\n     * @param {Event} e\r\n     */\n\n  }, {\n    key: \"pointClickHandler\",\n    value: function pointClickHandler(e, index) {\n      e.preventDefault();\n      this.selectedPointIndex = index;\n      document.addEventListener(\"mouseup\", this.documentMouseupHandler);\n      document.addEventListener(\"mousemove\", this.documentMouseMoveHandler);\n    }\n    /**\r\n     * Point mouse over box shadow and tooltip displaying\r\n     * @param {Event} e\r\n     * @param {number} index\r\n     */\n\n  }, {\n    key: \"pointMouseoverHandler\",\n    value: function pointMouseoverHandler(e, index) {\n      var transparentColor = RangeSlider.addTransparencyToColor(this.points[index].style.backgroundColor, 16);\n\n      if (this.selectedPointIndex < 0) {\n        this.points[index].style.boxShadow = \"0px 0px 0px \".concat(Math.floor(this.allProps.pointRadius / 1.5), \"px \").concat(transparentColor);\n      }\n\n      this.tooltip.style.transform = \"translate(-50%, -60%) scale(1)\";\n      this.tooltip.style.left = this.pointPositions[index] + \"px\";\n      this.tooltip.textContent = this.allProps.values[index];\n    }\n    /**\r\n     * Add transparency for rgb, rgba or hex color\r\n     * @param {string} color\r\n     * @param {number} percentage\r\n     */\n\n  }, {\n    key: \"pointMouseOutHandler\",\n    value:\n    /**\r\n     * Hide shadow and tooltip on mouse out\r\n     * @param {Event} e\r\n     * @param {number} index\r\n     */\n    function pointMouseOutHandler(e, index) {\n      if (this.selectedPointIndex < 0) {\n        this.points[index].style.boxShadow = \"none\";\n        this.tooltip.style.transform = \"translate(-50%, -60%) scale(0)\";\n      }\n    }\n    /**\r\n     * Get mouse position relatively from containers left position on the page\r\n     */\n\n  }, {\n    key: \"getMouseRelativePosition\",\n    value: function getMouseRelativePosition(pageX) {\n      return pageX - this.container.offsetLeft;\n    }\n    /**\r\n     * Register onChange callback to call it on slider move end passing all the present values\r\n     */\n\n  }, {\n    key: \"onChange\",\n    value: function onChange(func) {\n      if (typeof func !== \"function\") {\n        throw new Error(\"Please provide function as onChange callback\");\n      }\n\n      this.changeHandlers.push(func);\n      return this;\n    }\n  }], [{\n    key: \"addTransparencyToColor\",\n    value: function addTransparencyToColor(color, percentage) {\n      if (color.startsWith(\"rgba\")) {\n        return color.replace(/(\\d+)(?!.*\\d)/, percentage + \"%\");\n      }\n\n      if (color.startsWith(\"rgb\")) {\n        var newColor = color.replace(/(\\))(?!.*\\))/, \", \".concat(percentage, \"%)\"));\n        return newColor.replace(\"rgb\", \"rgba\");\n      }\n\n      if (color.startsWith(\"#\")) {\n        return color + percentage.toString(16);\n      }\n\n      return color;\n    }\n  }]);\n\n  return RangeSlider;\n}();\n\n\n\n//# sourceURL=webpack://RangeSlider/./src/range-slider.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ RangeSlider)\n/* harmony export */ });\n/* harmony import */ var _range_slider_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./range-slider.css */ \"./src/range-slider.css\");\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n/*\n    This is a RangeSlider html component for one of my projects\n    It allows to have multiple points and different ranges of values with specified steps to jumb.\n    It has a easy api to customize sizes and colors of points, tracks, etc.\n    It has onChange method, which receives and callback and calls it with current values\n*/\n\n\nvar RangeSlider = /*#__PURE__*/function () {\n  /**\n   * Create slider\n   * @param  {string} selector\n   * @param  {object} props={}\n   */\n  function RangeSlider(selector) {\n    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n    _classCallCheck(this, RangeSlider);\n\n    this.defaultProps = {\n      values: [25, 75],\n      step: 1,\n      min: 0,\n      max: 100,\n      colors: {\n        points: \"rgb(25, 118, 210)\",\n        // ['red', 'green', 'blue']\n        rail: \"rgba(25, 118, 210, 0.4)\",\n        tracks: \"rgb(25, 118, 210)\" // // ['red', 'green']\n\n      },\n      pointRadius: 15,\n      railHeight: 5,\n      trackHeight: 5,\n      tooltipHandler: null\n    };\n    this.allProps = _objectSpread(_objectSpread(_objectSpread({}, this.defaultProps), props), {}, {\n      values: _toConsumableArray(props.values || this.defaultProps.values),\n      colors: _objectSpread(_objectSpread({}, this.defaultProps.colors), props.colors)\n    });\n    this.container = this.initContainer(selector);\n    this.pointPositions = this.generatePointPositions();\n    this.possibleValues = this.generatePossibleValues();\n    this.jump = this.container.offsetWidth / Math.ceil((this.allProps.max - this.allProps.min) / this.allProps.step);\n    this.rail = this.initRail();\n    this.tracks = this.initTracks(this.allProps.values.length - 1);\n    this.tooltip = this.initTooltip();\n    this.points = this.initPoints(this.allProps.values.length);\n    this.drawScene();\n    this.documentMouseupHandler = this.documentMouseupHandler.bind(this);\n    this.documentMouseMoveHandler = this.documentMouseMoveHandler.bind(this);\n    this.selectedPointIndex = -1;\n    this.changeHandlers = [];\n    return this;\n  }\n  /**\n   * Draw all elements with initial positions\n   */\n\n\n  _createClass(RangeSlider, [{\n    key: \"drawScene\",\n    value: function drawScene() {\n      var _this = this;\n\n      this.container.classList.add(\"range-slider__container\");\n      this.container.appendChild(this.rail);\n      this.container.appendChild(this.tooltip);\n      this.tracks.forEach(function (track) {\n        return _this.container.appendChild(track);\n      });\n      this.points.forEach(function (point) {\n        return _this.container.appendChild(point);\n      });\n    }\n  }, {\n    key: \"generatePointPositions\",\n    value: function generatePointPositions() {\n      var _this3 = this;\n\n      return this.allProps.values.map(function (value) {\n        var percentage = (value - _this2.allProps.min) / (_this2.allProps.max - _this2.allProps.min) * 100;\n        return Math.floor(percentage / 100 * _this3.container.offsetWidth);\n      });\n    }\n    /**\n     * Generate all values that can slider have starting from min, to max increased by step\n     */\n\n  }, {\n    key: \"generatePossibleValues\",\n    value: function generatePossibleValues() {\n      var values = [];\n\n      for (var i = this.allProps.min; i <= this.allProps.max; i += this.allProps.step) {\n        values.push(Math.round(i * 100) / 100);\n      }\n\n      if (this.allProps.max % this.allProps.step > 0) {\n        values.push(Math.round(this.allProps.max * 100) / 100);\n      }\n\n      return values;\n    }\n    /**\n     * Initialize container\n     * @param  {string} selector\n     */\n\n  }, {\n    key: \"initContainer\",\n    value: function initContainer(selector) {\n      var container = selector instanceof HTMLElement ? selector : document.querySelector(selector);\n      container.classList.add(\"range-slider__container\");\n      container.style.height = this.allProps.pointRadius * 2 + \"px\";\n      return container;\n    }\n    /**\n     * Initialize Rail\n     */\n\n  }, {\n    key: \"initRail\",\n    value: function initRail() {\n      var _this4 = this;\n\n      var rail = document.createElement(\"span\");\n      rail.classList.add(\"range-slider__rail\");\n      rail.style.background = this.allProps.colors.rail;\n      rail.style.height = this.allProps.railHeight + \"px\";\n      rail.style.top = this.allProps.pointRadius + \"px\";\n      rail.addEventListener(\"click\", function (e) {\n        return _this4.railClickHandler(e);\n      });\n      return rail;\n    }\n    /**\n     * Initialize all tracks (equal to number of points - 1)\n     * @param  {number} count\n     */\n\n  }, {\n    key: \"initTracks\",\n    value: function initTracks(count) {\n      var tracks = [];\n\n      for (var i = 0; i < count; i++) {\n        tracks.push(this.initTrack(i));\n      }\n\n      return tracks;\n    }\n    /**\n     * Initialize single track at specific index position\n     * @param  {number} index\n     */\n\n  }, {\n    key: \"initTrack\",\n    value: function initTrack(index) {\n      var _this5 = this;\n\n      var track = document.createElement(\"span\");\n      track.classList.add(\"range-slider__track\");\n      var trackPointPositions = this.pointPositions.slice(index, index + 2);\n      track.style.left = Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n      track.style.top = this.allProps.pointRadius + \"px\";\n      track.style.width = Math.max.apply(Math, _toConsumableArray(trackPointPositions)) - Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n      track.style.height = this.allProps.trackHeight + \"px\";\n      var trackColors = this.allProps.colors.tracks;\n      track.style.background = Array.isArray(trackColors) ? trackColors[index] || trackColors[trackColors.length - 1] : trackColors;\n      track.addEventListener(\"click\", function (e) {\n        return _this5.railClickHandler(e);\n      });\n      return track;\n    }\n    /**\n     * Initialize all points (equal to number of values)\n     * @param  {number} count\n     */\n\n  }, {\n    key: \"initPoints\",\n    value: function initPoints(count) {\n      var points = [];\n\n      for (var i = 0; i < count; i++) {\n        points.push(this.initPoint(i));\n      }\n\n      return points;\n    }\n    /**\n     * Initialize single track at specific index position\n     * @param  {number} index\n     */\n\n  }, {\n    key: \"initPoint\",\n    value: function initPoint(index) {\n      var _this6 = this;\n\n      var point = document.createElement(\"span\");\n      point.classList.add(\"range-slider__point\");\n      point.style.width = this.allProps.pointRadius * 2 + \"px\";\n      point.style.height = this.allProps.pointRadius * 2 + \"px\";\n      point.style.left = \"\".concat(this.pointPositions[index] / this.container.offsetWidth * 100, \"%\");\n      var pointColors = this.allProps.colors.points;\n      point.style.background = Array.isArray(pointColors) ? pointColors[index] || pointColors[pointColors.length - 1] : pointColors;\n      point.addEventListener(\"mousedown\", function (e) {\n        return _this6.pointClickHandler(e, index);\n      });\n      point.addEventListener(\"mouseover\", function (e) {\n        return _this6.pointMouseoverHandler(e, index);\n      });\n      point.addEventListener(\"mouseout\", function (e) {\n        return _this6.pointMouseOutHandler(e, index);\n      });\n      return point;\n    }\n    /**\n     * Initialize tooltip\n     */\n\n  }, {\n    key: \"initTooltip\",\n    value: function initTooltip() {\n      var tooltip = document.createElement(\"span\");\n      tooltip.classList.add(\"range-slider__tooltip\");\n      tooltip.style.fontSize = this.allProps.pointRadius + \"px\";\n      return tooltip;\n    }\n    /**\n     * Draw points, tracks and tooltip (on rail click or on drag)\n     */\n\n  }, {\n    key: \"draw\",\n    value: function draw() {\n      var _this7 = this;\n\n      this.points.forEach(function (point, i) {\n        point.style.left = \"\".concat(_this7.pointPositions[i] / _this7.container.offsetWidth * 100, \"%\");\n      });\n      this.tracks.forEach(function (track, i) {\n        var trackPointPositions = _this7.pointPositions.slice(i, i + 2);\n\n        track.style.left = Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n        track.style.width = Math.max.apply(Math, _toConsumableArray(trackPointPositions)) - Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + \"px\";\n      });\n      this.tooltip.style.left = this.pointPositions[this.selectedPointIndex] + \"px\";\n      var content = this.allProps.values[this.selectedPointIndex];\n\n      if (this.allProps.tooltipHandler !== null) {\n        content = this.allProps.tooltipHandler(content);\n      }\n\n      this.tooltip.textContent = content;\n    }\n    /**\n     * Redraw on rail click\n     * @param  {Event} e\n     */\n\n  }, {\n    key: \"railClickHandler\",\n    value: function railClickHandler(e) {\n      var newPosition = this.getMouseRelativePosition(e.pageX);\n      var closestPositionIndex = this.getClosestPointIndex(newPosition);\n      this.pointPositions[closestPositionIndex] = newPosition;\n      this.draw();\n    }\n    /**\n     * Find the closest possible point position fro current mouse position\n     * in order to move the point\n     * @param  {number} mousePoisition\n     */\n\n  }, {\n    key: \"getClosestPointIndex\",\n    value: function getClosestPointIndex(mousePoisition) {\n      var shortestDistance = Infinity;\n      var index = 0;\n\n      for (var i in this.pointPositions) {\n        var dist = Math.abs(mousePoisition - this.pointPositions[i]);\n\n        if (shortestDistance > dist) {\n          shortestDistance = dist;\n          index = i;\n        }\n      }\n\n      return index;\n    }\n    /**\n     * Stop point moving on mouse up\n     */\n\n  }, {\n    key: \"documentMouseupHandler\",\n    value: function documentMouseupHandler() {\n      var _this8 = this;\n\n      this.changeHandlers.forEach(function (func) {\n        return func(_this8.allProps.values);\n      });\n      this.points[this.selectedPointIndex].style.boxShadow = \"none\";\n      this.selectedPointIndex = -1;\n      this.tooltip.style.transform = \"translate(-50%, -60%) scale(0)\";\n      document.removeEventListener(\"mouseup\", this.documentMouseupHandler);\n      document.removeEventListener(\"mousemove\", this.documentMouseMoveHandler);\n    }\n    /**\n     * Start point moving on mouse move\n     * @param {Event} e\n     */\n\n  }, {\n    key: \"documentMouseMoveHandler\",\n    value: function documentMouseMoveHandler(e) {\n      var newPoisition = this.getMouseRelativePosition(e.pageX);\n      var extra = Math.floor(newPoisition % this.jump);\n\n      if (extra > this.jump / 2) {\n        newPoisition += this.jump - extra;\n      } else {\n        newPoisition -= extra;\n      }\n\n      if (newPoisition < 0) {\n        newPoisition = 0;\n      } else if (newPoisition > this.container.offsetWidth) {\n        newPoisition = this.container.offsetWidth;\n      }\n\n      this.pointPositions[this.selectedPointIndex] = newPoisition;\n      this.allProps.values[this.selectedPointIndex] = this.possibleValues[Math.floor(newPoisition / this.jump)];\n      this.draw();\n    }\n    /**\n     * Register document listeners on point click\n     * and save clicked point index\n     * @param {Event} e\n     */\n\n  }, {\n    key: \"pointClickHandler\",\n    value: function pointClickHandler(e, index) {\n      e.preventDefault();\n      this.selectedPointIndex = index;\n      document.addEventListener(\"mouseup\", this.documentMouseupHandler);\n      document.addEventListener(\"mousemove\", this.documentMouseMoveHandler);\n    }\n    /**\n     * Point mouse over box shadow and tooltip displaying\n     * @param {Event} e\n     * @param {number} index\n     */\n\n  }, {\n    key: \"pointMouseoverHandler\",\n    value: function pointMouseoverHandler(e, index) {\n      var transparentColor = RangeSlider.addTransparencyToColor(this.points[index].style.backgroundColor, 16);\n\n      if (this.selectedPointIndex < 0) {\n        this.points[index].style.boxShadow = \"0px 0px 0px \".concat(Math.floor(this.allProps.pointRadius / 1.5), \"px \").concat(transparentColor);\n      }\n\n      this.tooltip.style.transform = \"translate(-50%, -60%) scale(1)\";\n      this.tooltip.style.left = this.pointPositions[index] + \"px\";\n      var content = this.allProps.values[index];\n\n      if (this.allProps.tooltipHandler !== null) {\n        content = this.allProps.tooltipHandler(content);\n      }\n\n      this.tooltip.textContent = content;\n    }\n    /**\n     * Add transparency for rgb, rgba or hex color\n     * @param {string} color\n     * @param {number} percentage\n     */\n\n  }, {\n    key: \"pointMouseOutHandler\",\n    value:\n    /**\n     * Hide shadow and tooltip on mouse out\n     * @param {Event} e\n     * @param {number} index\n     */\n    function pointMouseOutHandler(e, index) {\n      if (this.selectedPointIndex < 0) {\n        this.points[index].style.boxShadow = \"none\";\n        this.tooltip.style.transform = \"translate(-50%, -60%) scale(0)\";\n      }\n    }\n    /**\n     * Get mouse position relatively from containers left position on the page\n     */\n\n  }, {\n    key: \"getMouseRelativePosition\",\n    value: function getMouseRelativePosition(pageX) {\n      var containerPosition = this.container.getBoundingClientRect();\n      return pageX - containerPosition.left;\n    }\n    /**\n     * Register onChange callback to call it on slider move end passing all the present values\n     */\n\n  }, {\n    key: \"onChange\",\n    value: function onChange(func) {\n      if (typeof func !== \"function\") {\n        throw new Error(\"Please provide function as onChange callback\");\n      }\n\n      this.changeHandlers.push(func);\n      return this;\n    }\n  }], [{\n    key: \"addTransparencyToColor\",\n    value: function addTransparencyToColor(color, percentage) {\n      if (color.startsWith(\"rgba\")) {\n        return color.replace(/(\\d+)(?!.*\\d)/, percentage + \"%\");\n      }\n\n      if (color.startsWith(\"rgb\")) {\n        var newColor = color.replace(/(\\))(?!.*\\))/, \", \".concat(percentage, \"%)\"));\n        return newColor.replace(\"rgb\", \"rgba\");\n      }\n\n      if (color.startsWith(\"#\")) {\n        return color + percentage.toString(16);\n      }\n\n      return color;\n    }\n  }]);\n\n  return RangeSlider;\n}();\n\n\n\n//# sourceURL=webpack://RangeSlider/./src/range-slider.js?");
 
@@ -40,3 +40,3 @@ /***/ }),
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".range-slider__container{ \\r\\n    margin-bottom: 100px;\\r\\n}\\r\\n\\r\\n.range-slider__container{\\r\\n    position: relative;\\r\\n}\\r\\n\\r\\n.range-slider__container span{\\r\\n    display: inline-block;\\r\\n}\\r\\n\\r\\n.range-slider__rail {\\r\\n    width: 100%;\\r\\n    position: absolute;\\r\\n    transform: translateY(-50%);\\r\\n    left: 0;\\r\\n\\r\\n    cursor: pointer;\\r\\n}\\r\\n\\r\\n.range-slider__track {\\r\\n    position: absolute;\\r\\n    transform: translateY(-50%);\\r\\n    cursor: pointer;\\r\\n}\\r\\n\\r\\n.range-slider__point {\\r\\n    top: 0;\\r\\n    transform: translateX(-50%);\\r\\n    position: absolute;\\r\\n    border-radius: 50%;\\r\\n    cursor: pointer;\\r\\n    transition: box-shadow 150ms;\\r\\n}\\r\\n\\r\\n.range-slider__container .range-slider__tooltip {\\r\\n    min-width: 30px;\\r\\n    font-size: 16px;\\r\\n    padding: 0.3em 0.6em;\\r\\n    background-color: gray;\\r\\n    color: white;\\r\\n    position: absolute;\\r\\n    left: 0;\\r\\n    top: -100%;\\r\\n    text-align: center;\\r\\n    border-radius: 3px;\\r\\n    user-select: none;\\r\\n    transform: translate(-50%, -50%) scale(0);\\r\\n    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\r\\n}\\r\\n\\r\\n.range-slider__container .range-slider__tooltip::after {\\r\\n    content: '';\\r\\n    background-color: gray;\\r\\n    width: 1em;\\r\\n    height: 1em;\\r\\n    position: absolute;\\r\\n    bottom: -5px;\\r\\n    transform: translate(-50%) rotate(45deg);\\r\\n    left: 50%;\\r\\n    z-index: -1;\\r\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://RangeSlider/./src/range-slider.css?./node_modules/css-loader/dist/cjs.js");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".range-slider__container{ \\n    margin-bottom: 100px;\\n}\\n\\n.range-slider__container{\\n    position: relative;\\n}\\n\\n.range-slider__container span{\\n    display: inline-block;\\n}\\n\\n.range-slider__rail {\\n    width: 100%;\\n    position: absolute;\\n    transform: translateY(-50%);\\n    left: 0;\\n\\n    cursor: pointer;\\n}\\n\\n.range-slider__track {\\n    position: absolute;\\n    transform: translateY(-50%);\\n    cursor: pointer;\\n}\\n\\n.range-slider__point {\\n    top: 0;\\n    transform: translateX(-50%);\\n    position: absolute;\\n    border-radius: 50%;\\n    cursor: pointer;\\n    transition: box-shadow 150ms;\\n}\\n\\n.range-slider__container .range-slider__tooltip {\\n    min-width: 30px;\\n    font-size: 16px;\\n    padding: 0.3em 0.6em;\\n    background-color: gray;\\n    color: white;\\n    position: absolute;\\n    left: 0;\\n    top: -100%;\\n    text-align: center;\\n    border-radius: 3px;\\n    user-select: none;\\n    transform: translate(-50%, -50%) scale(0);\\n    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\n}\\n\\n.range-slider__container .range-slider__tooltip::after {\\n    content: '';\\n    background-color: gray;\\n    width: 1em;\\n    height: 1em;\\n    position: absolute;\\n    bottom: -5px;\\n    transform: translate(-50%) rotate(45deg);\\n    left: 50%;\\n    z-index: -1;\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://RangeSlider/./src/range-slider.css?./node_modules/css-loader/dist/cjs.js");
 
@@ -43,0 +43,0 @@ /***/ }),

dist/range-slider.main.min.js

@@ -30,3 +30,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".range-slider__container{ \r\n    margin-bottom: 100px;\r\n}\r\n\r\n.range-slider__container{\r\n    position: relative;\r\n}\r\n\r\n.range-slider__container span{\r\n    display: inline-block;\r\n}\r\n\r\n.range-slider__rail {\r\n    width: 100%;\r\n    position: absolute;\r\n    transform: translateY(-50%);\r\n    left: 0;\r\n\r\n    cursor: pointer;\r\n}\r\n\r\n.range-slider__track {\r\n    position: absolute;\r\n    transform: translateY(-50%);\r\n    cursor: pointer;\r\n}\r\n\r\n.range-slider__point {\r\n    top: 0;\r\n    transform: translateX(-50%);\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    transition: box-shadow 150ms;\r\n}\r\n\r\n.range-slider__container .range-slider__tooltip {\r\n    min-width: 30px;\r\n    font-size: 16px;\r\n    padding: 0.3em 0.6em;\r\n    background-color: gray;\r\n    color: white;\r\n    position: absolute;\r\n    left: 0;\r\n    top: -100%;\r\n    text-align: center;\r\n    border-radius: 3px;\r\n    user-select: none;\r\n    transform: translate(-50%, -50%) scale(0);\r\n    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\r\n}\r\n\r\n.range-slider__container .range-slider__tooltip::after {\r\n    content: '';\r\n    background-color: gray;\r\n    width: 1em;\r\n    height: 1em;\r\n    position: absolute;\r\n    bottom: -5px;\r\n    transform: translate(-50%) rotate(45deg);\r\n    left: 50%;\r\n    z-index: -1;\r\n}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".range-slider__container{ \n    margin-bottom: 100px;\n}\n\n.range-slider__container{\n    position: relative;\n}\n\n.range-slider__container span{\n    display: inline-block;\n}\n\n.range-slider__rail {\n    width: 100%;\n    position: absolute;\n    transform: translateY(-50%);\n    left: 0;\n\n    cursor: pointer;\n}\n\n.range-slider__track {\n    position: absolute;\n    transform: translateY(-50%);\n    cursor: pointer;\n}\n\n.range-slider__point {\n    top: 0;\n    transform: translateX(-50%);\n    position: absolute;\n    border-radius: 50%;\n    cursor: pointer;\n    transition: box-shadow 150ms;\n}\n\n.range-slider__container .range-slider__tooltip {\n    min-width: 30px;\n    font-size: 16px;\n    padding: 0.3em 0.6em;\n    background-color: gray;\n    color: white;\n    position: absolute;\n    left: 0;\n    top: -100%;\n    text-align: center;\n    border-radius: 3px;\n    user-select: none;\n    transform: translate(-50%, -50%) scale(0);\n    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n.range-slider__container .range-slider__tooltip::after {\n    content: '';\n    background-color: gray;\n    width: 1em;\n    height: 1em;\n    position: absolute;\n    bottom: -5px;\n    transform: translate(-50%) rotate(45deg);\n    left: 50%;\n    z-index: -1;\n}", ""]);
 // Exports
@@ -623,3 +623,4 @@ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
       railHeight: 5,
-      trackHeight: 5
+      trackHeight: 5,
+      tooltipHandler: null
     };
@@ -668,7 +669,7 @@ this.allProps = _objectSpread(_objectSpread(_objectSpread({}, this.defaultProps), props), {}, {
     value: function generatePointPositions() {
-      var _this2 = this;
+      var _this3 = this;
 
       return this.allProps.values.map(function (value) {
-        var percentage = value / _this2.allProps.max * 100;
-        return Math.floor(percentage / 100 * _this2.container.offsetWidth);
+        var percentage = (value - _this2.allProps.min) / (_this2.allProps.max - _this2.allProps.min) * 100;
+        return Math.floor(percentage / 100 * _this3.container.offsetWidth);
       });
@@ -703,3 +704,3 @@ }
     value: function initContainer(selector) {
-      var container = document.querySelector(selector);
+      var container = selector instanceof HTMLElement ? selector : document.querySelector(selector);
       container.classList.add("range-slider__container");
@@ -716,3 +717,3 @@ container.style.height = this.allProps.pointRadius * 2 + "px";
     value: function initRail() {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -725,3 +726,3 @@ var rail = document.createElement("span");
       rail.addEventListener("click", function (e) {
-        return _this3.railClickHandler(e);
+        return _this4.railClickHandler(e);
       });
@@ -754,3 +755,3 @@ return rail;
     value: function initTrack(index) {
-      var _this4 = this;
+      var _this5 = this;
 
@@ -767,3 +768,3 @@ var track = document.createElement("span");
       track.addEventListener("click", function (e) {
-        return _this4.railClickHandler(e);
+        return _this5.railClickHandler(e);
       });
@@ -796,3 +797,3 @@ return track;
     value: function initPoint(index) {
-      var _this5 = this;
+      var _this6 = this;
 
@@ -807,9 +808,9 @@ var point = document.createElement("span");
       point.addEventListener("mousedown", function (e) {
-        return _this5.pointClickHandler(e, index);
+        return _this6.pointClickHandler(e, index);
       });
       point.addEventListener("mouseover", function (e) {
-        return _this5.pointMouseoverHandler(e, index);
+        return _this6.pointMouseoverHandler(e, index);
       });
       point.addEventListener("mouseout", function (e) {
-        return _this5.pointMouseOutHandler(e, index);
+        return _this6.pointMouseOutHandler(e, index);
       });
@@ -837,9 +838,9 @@ return point;
     value: function draw() {
-      var _this6 = this;
+      var _this7 = this;
 
       this.points.forEach(function (point, i) {
-        point.style.left = "".concat(_this6.pointPositions[i] / _this6.container.offsetWidth * 100, "%");
+        point.style.left = "".concat(_this7.pointPositions[i] / _this7.container.offsetWidth * 100, "%");
       });
       this.tracks.forEach(function (track, i) {
-        var trackPointPositions = _this6.pointPositions.slice(i, i + 2);
+        var trackPointPositions = _this7.pointPositions.slice(i, i + 2);
 
@@ -850,3 +851,9 @@ track.style.left = Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + "px";
       this.tooltip.style.left = this.pointPositions[this.selectedPointIndex] + "px";
-      this.tooltip.textContent = this.allProps.values[this.selectedPointIndex];
+      var content = this.allProps.values[this.selectedPointIndex];
+
+      if (this.allProps.tooltipHandler !== null) {
+        content = this.allProps.tooltipHandler(content);
+      }
+
+      this.tooltip.textContent = content;
     }
@@ -896,6 +903,6 @@ /**
     value: function documentMouseupHandler() {
-      var _this7 = this;
+      var _this8 = this;
 
       this.changeHandlers.forEach(function (func) {
-        return func(_this7.allProps.values);
+        return func(_this8.allProps.values);
       });
@@ -966,3 +973,9 @@ this.points[this.selectedPointIndex].style.boxShadow = "none";
       this.tooltip.style.left = this.pointPositions[index] + "px";
-      this.tooltip.textContent = this.allProps.values[index];
+      var content = this.allProps.values[index];
+
+      if (this.allProps.tooltipHandler !== null) {
+        content = this.allProps.tooltipHandler(content);
+      }
+
+      this.tooltip.textContent = content;
     }
@@ -996,3 +1009,4 @@ /**
     value: function getMouseRelativePosition(pageX) {
-      return pageX - this.container.offsetLeft;
+      var containerPosition = this.container.getBoundingClientRect();
+      return pageX - containerPosition.left;
     }
@@ -999,0 +1013,0 @@ /**

dist/range-slider.min.js

@@ -96,3 +96,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
       railHeight: 5,
-      trackHeight: 5
+      trackHeight: 5,
+      tooltipHandler: null
     };
@@ -141,7 +142,7 @@ this.allProps = _objectSpread(_objectSpread(_objectSpread({}, this.defaultProps), props), {}, {
     value: function generatePointPositions() {
-      var _this2 = this;
+      var _this3 = this;
 
       return this.allProps.values.map(function (value) {
-        var percentage = value / _this2.allProps.max * 100;
-        return Math.floor(percentage / 100 * _this2.container.offsetWidth);
+        var percentage = (value - _this2.allProps.min) / (_this2.allProps.max - _this2.allProps.min) * 100;
+        return Math.floor(percentage / 100 * _this3.container.offsetWidth);
       });
@@ -176,3 +177,3 @@ }
     value: function initContainer(selector) {
-      var container = document.querySelector(selector);
+      var container = selector instanceof HTMLElement ? selector : document.querySelector(selector);
       container.classList.add("range-slider__container");
@@ -189,3 +190,3 @@ container.style.height = this.allProps.pointRadius * 2 + "px";
     value: function initRail() {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -198,3 +199,3 @@ var rail = document.createElement("span");
       rail.addEventListener("click", function (e) {
-        return _this3.railClickHandler(e);
+        return _this4.railClickHandler(e);
       });
@@ -227,3 +228,3 @@ return rail;
     value: function initTrack(index) {
-      var _this4 = this;
+      var _this5 = this;
 
@@ -240,3 +241,3 @@ var track = document.createElement("span");
       track.addEventListener("click", function (e) {
-        return _this4.railClickHandler(e);
+        return _this5.railClickHandler(e);
       });
@@ -269,3 +270,3 @@ return track;
     value: function initPoint(index) {
-      var _this5 = this;
+      var _this6 = this;
 
@@ -280,9 +281,9 @@ var point = document.createElement("span");
       point.addEventListener("mousedown", function (e) {
-        return _this5.pointClickHandler(e, index);
+        return _this6.pointClickHandler(e, index);
       });
       point.addEventListener("mouseover", function (e) {
-        return _this5.pointMouseoverHandler(e, index);
+        return _this6.pointMouseoverHandler(e, index);
       });
       point.addEventListener("mouseout", function (e) {
-        return _this5.pointMouseOutHandler(e, index);
+        return _this6.pointMouseOutHandler(e, index);
       });
@@ -310,9 +311,9 @@ return point;
     value: function draw() {
-      var _this6 = this;
+      var _this7 = this;
 
       this.points.forEach(function (point, i) {
-        point.style.left = "".concat(_this6.pointPositions[i] / _this6.container.offsetWidth * 100, "%");
+        point.style.left = "".concat(_this7.pointPositions[i] / _this7.container.offsetWidth * 100, "%");
       });
       this.tracks.forEach(function (track, i) {
-        var trackPointPositions = _this6.pointPositions.slice(i, i + 2);
+        var trackPointPositions = _this7.pointPositions.slice(i, i + 2);
 
@@ -323,3 +324,9 @@ track.style.left = Math.min.apply(Math, _toConsumableArray(trackPointPositions)) + "px";
       this.tooltip.style.left = this.pointPositions[this.selectedPointIndex] + "px";
-      this.tooltip.textContent = this.allProps.values[this.selectedPointIndex];
+      var content = this.allProps.values[this.selectedPointIndex];
+
+      if (this.allProps.tooltipHandler !== null) {
+        content = this.allProps.tooltipHandler(content);
+      }
+
+      this.tooltip.textContent = content;
     }
@@ -369,6 +376,6 @@ /**
     value: function documentMouseupHandler() {
-      var _this7 = this;
+      var _this8 = this;
 
       this.changeHandlers.forEach(function (func) {
-        return func(_this7.allProps.values);
+        return func(_this8.allProps.values);
       });
@@ -439,3 +446,9 @@ this.points[this.selectedPointIndex].style.boxShadow = "none";
       this.tooltip.style.left = this.pointPositions[index] + "px";
-      this.tooltip.textContent = this.allProps.values[index];
+      var content = this.allProps.values[index];
+
+      if (this.allProps.tooltipHandler !== null) {
+        content = this.allProps.tooltipHandler(content);
+      }
+
+      this.tooltip.textContent = content;
     }
@@ -469,3 +482,4 @@ /**
     value: function getMouseRelativePosition(pageX) {
-      return pageX - this.container.offsetLeft;
+      var containerPosition = this.container.getBoundingClientRect();
+      return pageX - containerPosition.left;
     }
@@ -472,0 +486,0 @@ /**

package.json

 {
   "name": "@spreadtheweb/multi-range-slider",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Simple, small and fast vanilla JavaScript multi range slider without dependencies, with ability to have multiple values and points to slide",
@@ -5,0 +5,0 @@ "browser": "dist/range-slider.main.min.js",

README.md

@@ -46,2 +46,22 @@ # Multi Range Slider
 
+## Tooltip Handler
+Use the `tooltipHandler` function to modify the content displayed on the tooltip.
+```
+<head>
+    ...
+    <script src="https://unpkg.com/@spreadtheweb/multi-range-slider@1.0.2/dist/range-slider.main.min.js"></script>
+</head>
+<body>
+    <div class="slider"></div>
+
+    <script>
+        let slider = new RangeSlider('.slider', {
+            tooltipHandler: function (content) {
+                return '$ ' + content
+            }
+        })
+    </script>
+</body>
+```
+
 ## Options
@@ -58,2 +78,3 @@ | Property      | Type | Default | Description |
 | trackHeight   | number        | 5 | height of track in px |
+| tooltipHandler   | function        | null | function to modify the content of the tooltip |
 
@@ -60,0 +81,0 @@ ## Methods

src/example.js

@@ -0,0 +0,0 @@ import RangeSlider from "./range-slider.js";

src/range-slider.js

@@ -29,3 +29,4 @@ /*
             railHeight: 5,
-            trackHeight: 5
+            trackHeight: 5,
+            tooltipHandler: null
         };
@@ -84,3 +85,3 @@
         return this.allProps.values.map(value => {
-            let percentage = (value / this.allProps.max) * 100;
+            var percentage = ((value - _this2.allProps.min) / (_this2.allProps.max - _this2.allProps.min)) * 100;
             return Math.floor((percentage / 100) * this.container.offsetWidth);
@@ -115,3 +116,3 @@ });
     initContainer(selector) {
-        const container = document.querySelector(selector);
+        const container = (selector instanceof HTMLElement ? selector : document.querySelector(selector));
         container.classList.add("range-slider__container");
@@ -256,5 +257,8 @@
             this.pointPositions[this.selectedPointIndex] + "px";
-        this.tooltip.textContent = this.allProps.values[
-            this.selectedPointIndex
-        ];
+
+        let content = this.allProps.values[this.selectedPointIndex];
+        if (this.allProps.tooltipHandler !== null) {
+            content = this.allProps.tooltipHandler(content);
+        }
+        this.tooltip.textContent = content;
     }
@@ -362,3 +366,8 @@
         this.tooltip.style.left = this.pointPositions[index] + "px";
-        this.tooltip.textContent = this.allProps.values[index];
+
+        let content = this.allProps.values[index];
+        if (this.allProps.tooltipHandler !== null) {
+            content = this.allProps.tooltipHandler(content);
+        }
+        this.tooltip.textContent = content;
     }
@@ -404,3 +413,4 @@
     getMouseRelativePosition(pageX) {
-        return pageX - this.container.offsetLeft;
+        const containerPosition = this.container.getBoundingClientRect();
+        return pageX - containerPosition.left;
     }
@@ -407,0 +417,0 @@

webpack.config.js

@@ -0,0 +0,0 @@ const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

No alert changes

Improved metrics

Total package byte prevSize

143984

increased by1.12%

Lines of code

2342

increased by1.25%

Number of lines in readme file

85

increased by32.81%

No dependency changes