@spreadtheweb/multi-range-slider
Version:
Simple, small and fast vanilla JavaScript multi range slider without dependencies, with ability to have multiple values and points to slide
216 lines (182 loc) • 43.6 kB
JavaScript
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["RangeSlider"] = factory();
else
root["RangeSlider"] = factory();
})(self, () => {
return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/range-slider.js":
/*!*****************************!*\
!*** ./src/range-slider.js ***!
\*****************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
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?");
/***/ }),
/***/ "./node_modules/css-loader/dist/cjs.js!./src/range-slider.css":
/*!********************************************************************!*\
!*** ./node_modules/css-loader/dist/cjs.js!./src/range-slider.css ***!
\********************************************************************/
/***/ ((module, __webpack_exports__, __webpack_require__) => {
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");
/***/ }),
/***/ "./node_modules/css-loader/dist/runtime/api.js":
/*!*****************************************************!*\
!*** ./node_modules/css-loader/dist/runtime/api.js ***!
\*****************************************************/
/***/ ((module) => {
eval("\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\nmodule.exports = function (cssWithMappingToString) {\n var list = []; // return the list of modules as css string\n\n list.toString = function toString() {\n return this.map(function (item) {\n var content = \"\";\n var needLayer = typeof item[5] !== \"undefined\";\n\n if (item[4]) {\n content += \"@supports (\".concat(item[4], \") {\");\n }\n\n if (item[2]) {\n content += \"@media \".concat(item[2], \" {\");\n }\n\n if (needLayer) {\n content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n }\n\n content += cssWithMappingToString(item);\n\n if (needLayer) {\n content += \"}\";\n }\n\n if (item[2]) {\n content += \"}\";\n }\n\n if (item[4]) {\n content += \"}\";\n }\n\n return content;\n }).join(\"\");\n }; // import a list of modules into the list\n\n\n list.i = function i(modules, media, dedupe, supports, layer) {\n if (typeof modules === \"string\") {\n modules = [[null, modules, undefined]];\n }\n\n var alreadyImportedModules = {};\n\n if (dedupe) {\n for (var k = 0; k < this.length; k++) {\n var id = this[k][0];\n\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n\n for (var _k = 0; _k < modules.length; _k++) {\n var item = [].concat(modules[_k]);\n\n if (dedupe && alreadyImportedModules[item[0]]) {\n continue;\n }\n\n if (typeof layer !== \"undefined\") {\n if (typeof item[5] === \"undefined\") {\n item[5] = layer;\n } else {\n item[1] = \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\").concat(item[1], \"}\");\n item[5] = layer;\n }\n }\n\n if (media) {\n if (!item[2]) {\n item[2] = media;\n } else {\n item[1] = \"@media \".concat(item[2], \" {\").concat(item[1], \"}\");\n item[2] = media;\n }\n }\n\n if (supports) {\n if (!item[4]) {\n item[4] = \"\".concat(supports);\n } else {\n item[1] = \"@supports (\".concat(item[4], \") {\").concat(item[1], \"}\");\n item[4] = supports;\n }\n }\n\n list.push(item);\n }\n };\n\n return list;\n};\n\n//# sourceURL=webpack://RangeSlider/./node_modules/css-loader/dist/runtime/api.js?");
/***/ }),
/***/ "./node_modules/css-loader/dist/runtime/noSourceMaps.js":
/*!**************************************************************!*\
!*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***!
\**************************************************************/
/***/ ((module) => {
eval("\n\nmodule.exports = function (i) {\n return i[1];\n};\n\n//# sourceURL=webpack://RangeSlider/./node_modules/css-loader/dist/runtime/noSourceMaps.js?");
/***/ }),
/***/ "./src/range-slider.css":
/*!******************************!*\
!*** ./src/range-slider.css ***!
\******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
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_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_range_slider_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./range-slider.css */ \"./node_modules/css-loader/dist/cjs.js!./src/range-slider.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_range_slider_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_range_slider_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_range_slider_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_range_slider_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://RangeSlider/./src/range-slider.css?");
/***/ }),
/***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":
/*!****************************************************************************!*\
!*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
\****************************************************************************/
/***/ ((module) => {
eval("\n\nvar stylesInDOM = [];\n\nfunction getIndexByIdentifier(identifier) {\n var result = -1;\n\n for (var i = 0; i < stylesInDOM.length; i++) {\n if (stylesInDOM[i].identifier === identifier) {\n result = i;\n break;\n }\n }\n\n return result;\n}\n\nfunction modulesToDom(list, options) {\n var idCountMap = {};\n var identifiers = [];\n\n for (var i = 0; i < list.length; i++) {\n var item = list[i];\n var id = options.base ? item[0] + options.base : item[0];\n var count = idCountMap[id] || 0;\n var identifier = \"\".concat(id, \" \").concat(count);\n idCountMap[id] = count + 1;\n var indexByIdentifier = getIndexByIdentifier(identifier);\n var obj = {\n css: item[1],\n media: item[2],\n sourceMap: item[3],\n supports: item[4],\n layer: item[5]\n };\n\n if (indexByIdentifier !== -1) {\n stylesInDOM[indexByIdentifier].references++;\n stylesInDOM[indexByIdentifier].updater(obj);\n } else {\n var updater = addElementStyle(obj, options);\n options.byIndex = i;\n stylesInDOM.splice(i, 0, {\n identifier: identifier,\n updater: updater,\n references: 1\n });\n }\n\n identifiers.push(identifier);\n }\n\n return identifiers;\n}\n\nfunction addElementStyle(obj, options) {\n var api = options.domAPI(options);\n api.update(obj);\n\n var updater = function updater(newObj) {\n if (newObj) {\n if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {\n return;\n }\n\n api.update(obj = newObj);\n } else {\n api.remove();\n }\n };\n\n return updater;\n}\n\nmodule.exports = function (list, options) {\n options = options || {};\n list = list || [];\n var lastIdentifiers = modulesToDom(list, options);\n return function update(newList) {\n newList = newList || [];\n\n for (var i = 0; i < lastIdentifiers.length; i++) {\n var identifier = lastIdentifiers[i];\n var index = getIndexByIdentifier(identifier);\n stylesInDOM[index].references--;\n }\n\n var newLastIdentifiers = modulesToDom(newList, options);\n\n for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n var _identifier = lastIdentifiers[_i];\n\n var _index = getIndexByIdentifier(_identifier);\n\n if (stylesInDOM[_index].references === 0) {\n stylesInDOM[_index].updater();\n\n stylesInDOM.splice(_index, 1);\n }\n }\n\n lastIdentifiers = newLastIdentifiers;\n };\n};\n\n//# sourceURL=webpack://RangeSlider/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?");
/***/ }),
/***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js":
/*!********************************************************************!*\
!*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***!
\********************************************************************/
/***/ ((module) => {
eval("\n\nvar memo = {};\n/* istanbul ignore next */\n\nfunction getTarget(target) {\n if (typeof memo[target] === \"undefined\") {\n var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself\n\n if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n try {\n // This will throw an exception if access to iframe is blocked\n // due to cross-origin restrictions\n styleTarget = styleTarget.contentDocument.head;\n } catch (e) {\n // istanbul ignore next\n styleTarget = null;\n }\n }\n\n memo[target] = styleTarget;\n }\n\n return memo[target];\n}\n/* istanbul ignore next */\n\n\nfunction insertBySelector(insert, style) {\n var target = getTarget(insert);\n\n if (!target) {\n throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n }\n\n target.appendChild(style);\n}\n\nmodule.exports = insertBySelector;\n\n//# sourceURL=webpack://RangeSlider/./node_modules/style-loader/dist/runtime/insertBySelector.js?");
/***/ }),
/***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js":
/*!**********************************************************************!*\
!*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***!
\**********************************************************************/
/***/ ((module) => {
eval("\n\n/* istanbul ignore next */\nfunction insertStyleElement(options) {\n var element = document.createElement(\"style\");\n options.setAttributes(element, options.attributes);\n options.insert(element, options.options);\n return element;\n}\n\nmodule.exports = insertStyleElement;\n\n//# sourceURL=webpack://RangeSlider/./node_modules/style-loader/dist/runtime/insertStyleElement.js?");
/***/ }),
/***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":
/*!**********************************************************************************!*\
!*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***!
\**********************************************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
eval("\n\n/* istanbul ignore next */\nfunction setAttributesWithoutAttributes(styleElement) {\n var nonce = true ? __webpack_require__.nc : 0;\n\n if (nonce) {\n styleElement.setAttribute(\"nonce\", nonce);\n }\n}\n\nmodule.exports = setAttributesWithoutAttributes;\n\n//# sourceURL=webpack://RangeSlider/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js?");
/***/ }),
/***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js":
/*!***************************************************************!*\
!*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***!
\***************************************************************/
/***/ ((module) => {
eval("\n\n/* istanbul ignore next */\nfunction apply(styleElement, options, obj) {\n var css = \"\";\n\n if (obj.supports) {\n css += \"@supports (\".concat(obj.supports, \") {\");\n }\n\n if (obj.media) {\n css += \"@media \".concat(obj.media, \" {\");\n }\n\n var needLayer = typeof obj.layer !== \"undefined\";\n\n if (needLayer) {\n css += \"@layer\".concat(obj.layer.length > 0 ? \" \".concat(obj.layer) : \"\", \" {\");\n }\n\n css += obj.css;\n\n if (needLayer) {\n css += \"}\";\n }\n\n if (obj.media) {\n css += \"}\";\n }\n\n if (obj.supports) {\n css += \"}\";\n }\n\n var sourceMap = obj.sourceMap;\n\n if (sourceMap && typeof btoa !== \"undefined\") {\n css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n } // For old IE\n\n /* istanbul ignore if */\n\n\n options.styleTagTransform(css, styleElement, options.options);\n}\n\nfunction removeStyleElement(styleElement) {\n // istanbul ignore if\n if (styleElement.parentNode === null) {\n return false;\n }\n\n styleElement.parentNode.removeChild(styleElement);\n}\n/* istanbul ignore next */\n\n\nfunction domAPI(options) {\n var styleElement = options.insertStyleElement(options);\n return {\n update: function update(obj) {\n apply(styleElement, options, obj);\n },\n remove: function remove() {\n removeStyleElement(styleElement);\n }\n };\n}\n\nmodule.exports = domAPI;\n\n//# sourceURL=webpack://RangeSlider/./node_modules/style-loader/dist/runtime/styleDomAPI.js?");
/***/ }),
/***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js":
/*!*********************************************************************!*\
!*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***!
\*********************************************************************/
/***/ ((module) => {
eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElement) {\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = css;\n } else {\n while (styleElement.firstChild) {\n styleElement.removeChild(styleElement.firstChild);\n }\n\n styleElement.appendChild(document.createTextNode(css));\n }\n}\n\nmodule.exports = styleTagTransform;\n\n//# sourceURL=webpack://RangeSlider/./node_modules/style-loader/dist/runtime/styleTagTransform.js?");
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ id: moduleId,
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/nonce */
/******/ (() => {
/******/ __webpack_require__.nc = undefined;
/******/ })();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = __webpack_require__("./src/range-slider.js");
/******/ __webpack_exports__ = __webpack_exports__["default"];
/******/
/******/ return __webpack_exports__;
/******/ })()
;
});