From c6086563be00518c253c55aad0ffbe6e17e08abb Mon Sep 17 00:00:00 2001 From: perry-C <2558544545qwerty@gmail.com> Date: Sat, 31 Jul 2021 23:20:08 +0800 Subject: [PATCH] thumb-hover transition and added docs --- components/docs-src/src/docs/en/slider.md | 64 ++++++++++++++++++++ components/docs-src/src/docs/zh-cn/slider.md | 63 +++++++++++++++++++ components/slider/README.md | 61 +++++++++++++++++++ components/slider/demo/js-demo/index.html | 4 +- components/slider/package.json | 4 ++ components/slider/src/index.css | 24 ++++---- components/slider/src/index.esm.js | 41 +++++++------ components/slider/src/index.esm.js.map | 2 +- components/slider/src/index.js | 19 +++--- components/slider/src/index.js.map | 2 +- components/slider/src/index.tsx | 22 +++---- 11 files changed, 255 insertions(+), 51 deletions(-) create mode 100644 components/docs-src/src/docs/en/slider.md create mode 100644 components/docs-src/src/docs/zh-cn/slider.md create mode 100644 components/slider/README.md diff --git a/components/docs-src/src/docs/en/slider.md b/components/docs-src/src/docs/en/slider.md new file mode 100644 index 000000000..4eac3f02a --- /dev/null +++ b/components/docs-src/src/docs/en/slider.md @@ -0,0 +1,64 @@ +## Slider + +Slider + + + +## Import + +```js +import '@omiu/slider' +``` + +Or use script tag to ref it. + + +```html + +``` + +## Usage + +```html + +``` + +## API + +### Props + +```tsx +{ + min?: number + max?: number + step?: number + value?: number + second_value?: number + double_range?: boolean + vertical?: boolean + round: boolean + disabled?: boolean +} +``` + +### defaultProps + +```tsx +{ + min: 0, + max: 100, + step: 1, + value: 0, + //default a single square range slider + double_range: false, + vertical: false, + round: false, + disabled: false, +} +``` +### Events + +* change diff --git a/components/docs-src/src/docs/zh-cn/slider.md b/components/docs-src/src/docs/zh-cn/slider.md new file mode 100644 index 000000000..13b437601 --- /dev/null +++ b/components/docs-src/src/docs/zh-cn/slider.md @@ -0,0 +1,63 @@ +## Slider 滑块 + +一般用于拖动页面内容 + + + +## 导入 + +```js +import '@omiu/slider' +``` + +或者直接 script 标签引入。 + + +```html + +``` + +## 使用 + +```html + +``` + + +## API + +### 属性 + +```tsx +{ + min?: number + max?: number + step?: number + value?: number + second_value?: number + double_range?: boolean + vertical?: boolean + round: boolean + disabled?: boolean +} +``` + +### 默认属性 +```tsx +{ + min: 0, + max: 100, + step: 1, + value: 0, + //default a single square range slider + double_range: false, + vertical: false, + round: false, + disabled: false, +} +``` +### 事件 +* change diff --git a/components/slider/README.md b/components/slider/README.md new file mode 100644 index 000000000..1eb532be6 --- /dev/null +++ b/components/slider/README.md @@ -0,0 +1,61 @@ +## Slider + +Slider + +* [→ CodePen](https://codepen.io/omijs/pen/undefined) + +## Import + +```js +import '@omiu/slider' +``` + +Or use script tag to ref it. + + +```html + +``` + +## Usage + +```html + +``` + +## API + +### Props + +```tsx +{ + min?: number + max?: number + step?: number + value?: number + second_value?: number + double_range?: boolean + vertical?: boolean + round: boolean + disabled?: boolean +} +``` + +### defaultProps + +```tsx +{ + min: 0, + max: 100, + step: 1, + value: 0, + //default a single square range slider + double_range: false, + vertical: false, + round: false, + disabled: false, +} +``` +### Events + +* change diff --git a/components/slider/demo/js-demo/index.html b/components/slider/demo/js-demo/index.html index c43e2df96..c1127f65b 100644 --- a/components/slider/demo/js-demo/index.html +++ b/components/slider/demo/js-demo/index.html @@ -10,10 +10,12 @@ + +
- + diff --git a/components/slider/package.json b/components/slider/package.json index 13fc47aa1..14aa3544a 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -5,6 +5,10 @@ "main": "src/index.js", "module": "src/index.esm.js", "types": "src/index.d.ts", + "docsExtend": { + "cnName": "滑块", + "cnDescription": "一般用于拖动页面内容" + }, "scripts": { "docs": "node ./scripts/docs-gen.js", "start": "node ./scripts/webpack.build.js -- demo", diff --git a/components/slider/src/index.css b/components/slider/src/index.css index 443f273fb..d9e18e47a 100644 --- a/components/slider/src/index.css +++ b/components/slider/src/index.css @@ -52,12 +52,12 @@ height: 31.25px; width: 31.25px; background-color: #07c160; + transition: background-color 150ms; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); top: 50%; margin-top: -17.625px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); pointer-events: auto; z-index: 2; - transition: background-color 150ms; -webkit-appearance: none; } .slider-container .o-slider::-webkit-slider-thumb:hover, .slider-container .o-slider::-webkit-slider-thumb:focus { background-color: #059048; } @@ -66,12 +66,12 @@ height: 31.25px; width: 31.25px; background-color: #07c160; + transition: background-color 150ms; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); top: 50%; margin-top: -17.625px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); pointer-events: auto; z-index: 2; - transition: background-color 150ms; -webkit-appearance: none; } .slider-container .o-slider::-moz-range-thumb:hover, .slider-container .o-slider::-moz-range-thumb:focus { background-color: #059048; } @@ -80,12 +80,12 @@ height: 31.25px; width: 31.25px; background-color: #07c160; + transition: background-color 150ms; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); top: 50%; margin-top: -17.625px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); pointer-events: auto; z-index: 2; - transition: background-color 150ms; appearance: none; } .slider-container .o-slider::-ms-thumb:hover, .slider-container .o-slider::-ms-thumb:focus { background-color: #059048; } @@ -122,12 +122,12 @@ height: 31.25px; width: 31.25px; background-color: #07c160; + transition: background-color 150ms; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); top: 50%; margin-top: -17.625px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); pointer-events: auto; z-index: 2; - transition: background-color 150ms; pointer-events: none; cursor: none; background-color: #c0c4cc; @@ -140,12 +140,12 @@ height: 31.25px; width: 31.25px; background-color: #07c160; + transition: background-color 150ms; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); top: 50%; margin-top: -17.625px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); pointer-events: auto; z-index: 2; - transition: background-color 150ms; pointer-events: none; cursor: none; background-color: #c0c4cc; @@ -158,12 +158,12 @@ height: 31.25px; width: 31.25px; background-color: #07c160; + transition: background-color 150ms; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); top: 50%; margin-top: -17.625px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); pointer-events: auto; z-index: 2; - transition: background-color 150ms; pointer-events: none; cursor: none; background-color: #c0c4cc; diff --git a/components/slider/src/index.esm.js b/components/slider/src/index.esm.js index f20a5ce94..73031585c 100644 --- a/components/slider/src/index.esm.js +++ b/components/slider/src/index.esm.js @@ -110,12 +110,12 @@ var css = `@use 'sass:math'; height: 31.25px; width: 31.25px; background-color: #07c160; + transition: background-color 150ms; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); top: 50%; margin-top: -17.625px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); pointer-events: auto; z-index: 2; - transition: background-color 150ms; -webkit-appearance: none; } .slider-container .o-slider::-webkit-slider-thumb:hover, .slider-container .o-slider::-webkit-slider-thumb:focus { background-color: #059048; } @@ -124,12 +124,12 @@ var css = `@use 'sass:math'; height: 31.25px; width: 31.25px; background-color: #07c160; + transition: background-color 150ms; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); top: 50%; margin-top: -17.625px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); pointer-events: auto; z-index: 2; - transition: background-color 150ms; -webkit-appearance: none; } .slider-container .o-slider::-moz-range-thumb:hover, .slider-container .o-slider::-moz-range-thumb:focus { background-color: #059048; } @@ -138,12 +138,12 @@ var css = `@use 'sass:math'; height: 31.25px; width: 31.25px; background-color: #07c160; + transition: background-color 150ms; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); top: 50%; margin-top: -17.625px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); pointer-events: auto; z-index: 2; - transition: background-color 150ms; appearance: none; } .slider-container .o-slider::-ms-thumb:hover, .slider-container .o-slider::-ms-thumb:focus { background-color: #059048; } @@ -180,12 +180,12 @@ var css = `@use 'sass:math'; height: 31.25px; width: 31.25px; background-color: #07c160; + transition: background-color 150ms; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); top: 50%; margin-top: -17.625px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); pointer-events: auto; z-index: 2; - transition: background-color 150ms; pointer-events: none; cursor: none; background-color: #c0c4cc; @@ -198,12 +198,12 @@ var css = `@use 'sass:math'; height: 31.25px; width: 31.25px; background-color: #07c160; + transition: background-color 150ms; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); top: 50%; margin-top: -17.625px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); pointer-events: auto; z-index: 2; - transition: background-color 150ms; pointer-events: none; cursor: none; background-color: #c0c4cc; @@ -216,12 +216,12 @@ var css = `@use 'sass:math'; height: 31.25px; width: 31.25px; background-color: #07c160; + transition: background-color 150ms; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); top: 50%; margin-top: -17.625px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); pointer-events: auto; z-index: 2; - transition: background-color 150ms; pointer-events: none; cursor: none; background-color: #c0c4cc; @@ -239,18 +239,26 @@ var OSlider = /** @class */ (function (_super) { function OSlider() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.sliderMax = _this.props.max; - _this.handleSliderOne = function () { + _this.handleSliderOne = function (evt) { var first_value = parseInt(_this.rootNode.children[0].value); - if (_this.__$second_value === null || first_value <= _this.__$second_value) { + //! bad + if (first_value <= _this.__$second_value || !_this.props.double_range) { _this.__$value = first_value; + if (!_this.props.double_range) { + _this.fire('change', _this.__$value); + } + else { + _this.fire('change', [_this.__$value, _this.__$second_value]); + } } _this.fillColor(); _this.update(); }; - _this.handleSliderTwo = function () { + _this.handleSliderTwo = function (evt) { var second_value = parseInt(_this.rootNode.children[1].value); if (second_value >= _this.__$value) { _this.__$second_value = second_value; + _this.fire('change', [_this.__$value, _this.__$second_value]); } _this.fillColor(); _this.update(); @@ -281,9 +289,6 @@ var OSlider = /** @class */ (function (_super) { this.fillColor(); this.update(); }; - // updated() { - // console.log(this.__$value, this.__$second_value) - // } OSlider.prototype.render = function (props) { var _this = this; var cls = extractClass(props, 'slider-container', { diff --git a/components/slider/src/index.esm.js.map b/components/slider/src/index.esm.js.map index cebf28a19..cb9e88511 100644 --- a/components/slider/src/index.esm.js.map +++ b/components/slider/src/index.esm.js.map @@ -1 +1 @@ -{"version":3,"file":"index.esm.js","sources":["../node_modules/tslib/tslib.es6.js","index.tsx"],"sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport function __createBinding(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n o[k2] = m[k];\r\n}\r\n\r\nexport function __exportStar(m, exports) {\r\n for (var p in m) if (p !== \"default\" && !exports.hasOwnProperty(p)) exports[p] = m[p];\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n};\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\r\n result.default = mod;\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, privateMap) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to get private field on non-instance\");\r\n }\r\n return privateMap.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, privateMap, value) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to set private field on non-instance\");\r\n }\r\n privateMap.set(receiver, value);\r\n return value;\r\n}\r\n","import { WeElement, h, tag, extractClass } from 'omi'\n\nimport * as css from './index.scss'\n\ninterface Props {\n min?: number\n max?: number\n step?: number\n value?: number\n second_value?: number\n double_range?: boolean\n vertical?: boolean\n round: boolean\n disabled?: boolean\n}\n\n@tag('o-slider')\nexport default class OSlider extends WeElement {\n static css = css\n\n static defaultProps = {\n min: 0,\n max: 100,\n step: 1,\n value: 0,\n //default a single square range slider\n double_range: false,\n vertical: false,\n round: false,\n disabled: false,\n }\n\n static propTypes = {\n min: Number,\n max: Number,\n step: Number,\n value: Number,\n second_value: Number,\n double_range: Boolean,\n vertical: Boolean,\n round: Boolean,\n disabled: Boolean,\n }\n\n __$value: number\n\n __$second_value: number\n\n rootNode\n sliderOne\n sliderTwo\n\n sliderTrack\n\n sliderMax = this.props.max\n\n handleSliderOne = () => {\n const first_value = parseInt(this.rootNode.children[0].value)\n if (this.__$second_value === null || first_value <= this.__$second_value) {\n this.__$value = first_value\n }\n\n this.fillColor()\n this.update()\n }\n\n handleSliderTwo = () => {\n const second_value = parseInt(this.rootNode.children[1].value)\n\n if (second_value >= this.__$value) {\n this.__$second_value = second_value\n }\n this.fillColor()\n this.update()\n }\n\n fillColor = () => {\n let percent1 = (this.__$value / this.props.max) * 100\n let percent2 = (this.__$second_value / this.props.max) * 100\n let lowerColor = '#07c160'\n let upperColor = '#ffffff'\n if (this.props.disabled) {\n lowerColor = '#c0c4cc'\n }\n\n this.props.double_range\n ? (this.sliderTrack.style.background = `linear-gradient(to right, ${upperColor} ${percent1}% , ${lowerColor} ${percent1}% , ${lowerColor} ${percent2}%, ${upperColor} ${percent2}%)`)\n : (this.sliderTrack.style.background = `linear-gradient(to right, ${lowerColor} ${percent1}% , ${lowerColor} ${percent1}% , ${lowerColor} ${percent2}%, ${upperColor} ${percent2}%)`)\n }\n\n install() {\n this.props.value\n ? (this.__$value = this.props.value as any)\n : (this.__$value = OSlider.defaultProps.value)\n this.props.second_value\n this.__$second_value = this.props.second_value as any\n }\n\n installed() {\n this.fillColor()\n this.update()\n }\n\n // updated() {\n // console.log(this.__$value, this.__$second_value)\n // }\n\n render(props) {\n const cls = extractClass(props, 'slider-container', {\n 'is-vertical': props.vertical,\n 'is-round': props.round,\n 'is-disabled': props.disabled,\n })\n\n return (\n {\n this.rootNode = e\n }}\n >\n {\n this.sliderOne = e\n }}\n />\n {props.double_range && (\n {\n this.sliderTwo = e\n }}\n />\n )}\n {\n this.sliderTrack = e\n }}\n >
\n \n )\n }\n}\n"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"index.esm.js","sources":["../node_modules/tslib/tslib.es6.js","index.tsx"],"sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport function __createBinding(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n o[k2] = m[k];\r\n}\r\n\r\nexport function __exportStar(m, exports) {\r\n for (var p in m) if (p !== \"default\" && !exports.hasOwnProperty(p)) exports[p] = m[p];\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n};\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\r\n result.default = mod;\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, privateMap) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to get private field on non-instance\");\r\n }\r\n return privateMap.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, privateMap, value) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to set private field on non-instance\");\r\n }\r\n privateMap.set(receiver, value);\r\n return value;\r\n}\r\n","import { WeElement, h, tag, extractClass } from 'omi'\n\nimport * as css from './index.scss'\n\ninterface Props {\n min?: number\n max?: number\n step?: number\n value?: number\n second_value?: number\n double_range?: boolean\n vertical?: boolean\n round: boolean\n disabled?: boolean\n}\n\n@tag('o-slider')\nexport default class OSlider extends WeElement {\n static css = css\n\n static defaultProps = {\n min: 0,\n max: 100,\n step: 1,\n value: 0,\n //default a single square range slider\n double_range: false,\n vertical: false,\n round: false,\n disabled: false,\n }\n\n static propTypes = {\n min: Number,\n max: Number,\n step: Number,\n value: Number,\n second_value: Number,\n double_range: Boolean,\n vertical: Boolean,\n round: Boolean,\n disabled: Boolean,\n }\n\n __$value: number\n __$second_value: number\n\n rootNode\n sliderOne\n sliderTwo\n sliderTrack\n sliderMax = this.props.max\n\n handleSliderOne = (evt) => {\n const first_value = parseInt(this.rootNode.children[0].value)\n //! bad\n if (first_value <= this.__$second_value || !this.props.double_range) {\n this.__$value = first_value\n if (!this.props.double_range) {\n this.fire('change', this.__$value)\n } else {\n this.fire('change', [this.__$value, this.__$second_value])\n }\n }\n\n this.fillColor()\n this.update()\n }\n\n handleSliderTwo = (evt) => {\n const second_value = parseInt(this.rootNode.children[1].value)\n if (second_value >= this.__$value) {\n this.__$second_value = second_value\n this.fire('change', [this.__$value, this.__$second_value])\n }\n\n this.fillColor()\n this.update()\n }\n\n fillColor = () => {\n let percent1 = (this.__$value / this.props.max) * 100\n let percent2 = (this.__$second_value / this.props.max) * 100\n let lowerColor = '#07c160'\n let upperColor = '#ffffff'\n if (this.props.disabled) {\n lowerColor = '#c0c4cc'\n }\n\n this.props.double_range\n ? (this.sliderTrack.style.background = `linear-gradient(to right, ${upperColor} ${percent1}% , ${lowerColor} ${percent1}% , ${lowerColor} ${percent2}%, ${upperColor} ${percent2}%)`)\n : (this.sliderTrack.style.background = `linear-gradient(to right, ${lowerColor} ${percent1}% , ${lowerColor} ${percent1}% , ${lowerColor} ${percent2}%, ${upperColor} ${percent2}%)`)\n }\n\n install() {\n this.props.value\n ? (this.__$value = this.props.value as any)\n : (this.__$value = OSlider.defaultProps.value)\n this.props.second_value\n this.__$second_value = this.props.second_value as any\n }\n\n installed() {\n this.fillColor()\n this.update()\n }\n\n render(props) {\n const cls = extractClass(props, 'slider-container', {\n 'is-vertical': props.vertical,\n 'is-round': props.round,\n 'is-disabled': props.disabled,\n })\n\n return (\n {\n this.rootNode = e\n }}\n >\n {\n this.sliderOne = e\n }}\n />\n {props.double_range && (\n {\n this.sliderTwo = e\n }}\n />\n )}\n {\n this.sliderTrack = e\n }}\n >\n \n )\n }\n}\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/components/slider/src/index.js b/components/slider/src/index.js index 9c28e9e69..fe2986d8f 100644 --- a/components/slider/src/index.js +++ b/components/slider/src/index.js @@ -108,7 +108,7 @@ exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/li // module -exports.push([module.i, "@use 'sass:math';\n:host {\n display: -ms-grid;\n display: grid; }\n\n.slider-container {\n position: relative;\n width: 100%;\n height: 50px; }\n\n.slider-container .slider-track {\n width: 100%;\n position: relative;\n margin: 5px;\n height: 12.5px;\n background-color: #ffffff;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n border: 2px solid #07c160;\n transition: background-color 200ms;\n position: absolute;\n top: 0;\n bottom: 0;\n outline: none;\n margin: auto;\n z-index: -1; }\n\n.slider-container .o-slider {\n width: 100%;\n height: 100%;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n position: absolute;\n top: 0;\n bottom: 0;\n background: transparent;\n z-index: 1;\n pointer-events: none; }\n .slider-container .o-slider:focus {\n outline: none; }\n .slider-container .o-slider::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n height: 12.5px; }\n .slider-container .o-slider::-moz-range-track {\n -moz-appearance: none;\n height: 12.5px; }\n .slider-container .o-slider::-ms-track {\n appearance: none;\n height: 12.5px; }\n .slider-container .o-slider::-webkit-slider-thumb {\n position: relative;\n height: 31.25px;\n width: 31.25px;\n background-color: #07c160;\n top: 50%;\n margin-top: -17.625px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n pointer-events: auto;\n z-index: 2;\n transition: background-color 150ms;\n -webkit-appearance: none; }\n .slider-container .o-slider::-webkit-slider-thumb:hover, .slider-container .o-slider::-webkit-slider-thumb:focus {\n background-color: #059048; }\n .slider-container .o-slider::-moz-range-thumb {\n position: relative;\n height: 31.25px;\n width: 31.25px;\n background-color: #07c160;\n top: 50%;\n margin-top: -17.625px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n pointer-events: auto;\n z-index: 2;\n transition: background-color 150ms;\n -webkit-appearance: none; }\n .slider-container .o-slider::-moz-range-thumb:hover, .slider-container .o-slider::-moz-range-thumb:focus {\n background-color: #059048; }\n .slider-container .o-slider::-ms-thumb {\n position: relative;\n height: 31.25px;\n width: 31.25px;\n background-color: #07c160;\n top: 50%;\n margin-top: -17.625px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n pointer-events: auto;\n z-index: 2;\n transition: background-color 150ms;\n appearance: none; }\n .slider-container .o-slider::-ms-thumb:hover, .slider-container .o-slider::-ms-thumb:focus {\n background-color: #059048; }\n\n.is-round .slider-track {\n border-radius: 8px; }\n\n.is-round .o-slider::-webkit-slider-thumb {\n outline-offset: -10px;\n border-radius: 50%;\n -webkit-appearance: none; }\n .is-round .o-slider::-webkit-slider-thumb:hover, .is-round .o-slider::-webkit-slider-thumb:focus {\n outline-offset: -12px; }\n\n.is-round .o-slider::-moz-range-thumb {\n outline-offset: -10px;\n border-radius: 50%;\n -webkit-appearance: none; }\n .is-round .o-slider::-moz-range-thumb:hover, .is-round .o-slider::-moz-range-thumb:focus {\n outline-offset: -12px; }\n\n.is-round .o-slider::-ms-thumb {\n outline-offset: -10px;\n border-radius: 50%;\n appearance: none; }\n .is-round .o-slider::-ms-thumb:hover, .is-round .o-slider::-ms-thumb:focus {\n outline-offset: -12px; }\n\n.is-disabled .slider-track {\n border-color: #c0c4cc; }\n\n.is-disabled .o-slider::-webkit-slider-thumb {\n position: relative;\n height: 31.25px;\n width: 31.25px;\n background-color: #07c160;\n top: 50%;\n margin-top: -17.625px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n pointer-events: auto;\n z-index: 2;\n transition: background-color 150ms;\n pointer-events: none;\n cursor: none;\n background-color: #c0c4cc;\n -webkit-appearance: none; }\n .is-disabled .o-slider::-webkit-slider-thumb:hover, .is-disabled .o-slider::-webkit-slider-thumb:focus {\n background-color: #059048; }\n\n.is-disabled .o-slider::-moz-range-thumb {\n position: relative;\n height: 31.25px;\n width: 31.25px;\n background-color: #07c160;\n top: 50%;\n margin-top: -17.625px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n pointer-events: auto;\n z-index: 2;\n transition: background-color 150ms;\n pointer-events: none;\n cursor: none;\n background-color: #c0c4cc;\n -webkit-appearance: none; }\n .is-disabled .o-slider::-moz-range-thumb:hover, .is-disabled .o-slider::-moz-range-thumb:focus {\n background-color: #059048; }\n\n.is-disabled .o-slider::-ms-thumb {\n position: relative;\n height: 31.25px;\n width: 31.25px;\n background-color: #07c160;\n top: 50%;\n margin-top: -17.625px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n pointer-events: auto;\n z-index: 2;\n transition: background-color 150ms;\n pointer-events: none;\n cursor: none;\n background-color: #c0c4cc;\n appearance: none; }\n .is-disabled .o-slider::-ms-thumb:hover, .is-disabled .o-slider::-ms-thumb:focus {\n background-color: #059048; }\n\n.is-vertical {\n transform: rotate(-90deg); }\n", ""]); +exports.push([module.i, "@use 'sass:math';\n:host {\n display: -ms-grid;\n display: grid; }\n\n.slider-container {\n position: relative;\n width: 100%;\n height: 50px; }\n\n.slider-container .slider-track {\n width: 100%;\n position: relative;\n margin: 5px;\n height: 12.5px;\n background-color: #ffffff;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n border: 2px solid #07c160;\n transition: background-color 200ms;\n position: absolute;\n top: 0;\n bottom: 0;\n outline: none;\n margin: auto;\n z-index: -1; }\n\n.slider-container .o-slider {\n width: 100%;\n height: 100%;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n position: absolute;\n top: 0;\n bottom: 0;\n background: transparent;\n z-index: 1;\n pointer-events: none; }\n .slider-container .o-slider:focus {\n outline: none; }\n .slider-container .o-slider::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n height: 12.5px; }\n .slider-container .o-slider::-moz-range-track {\n -moz-appearance: none;\n height: 12.5px; }\n .slider-container .o-slider::-ms-track {\n appearance: none;\n height: 12.5px; }\n .slider-container .o-slider::-webkit-slider-thumb {\n position: relative;\n height: 31.25px;\n width: 31.25px;\n background-color: #07c160;\n transition: background-color 150ms;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n top: 50%;\n margin-top: -17.625px;\n pointer-events: auto;\n z-index: 2;\n -webkit-appearance: none; }\n .slider-container .o-slider::-webkit-slider-thumb:hover, .slider-container .o-slider::-webkit-slider-thumb:focus {\n background-color: #059048; }\n .slider-container .o-slider::-moz-range-thumb {\n position: relative;\n height: 31.25px;\n width: 31.25px;\n background-color: #07c160;\n transition: background-color 150ms;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n top: 50%;\n margin-top: -17.625px;\n pointer-events: auto;\n z-index: 2;\n -webkit-appearance: none; }\n .slider-container .o-slider::-moz-range-thumb:hover, .slider-container .o-slider::-moz-range-thumb:focus {\n background-color: #059048; }\n .slider-container .o-slider::-ms-thumb {\n position: relative;\n height: 31.25px;\n width: 31.25px;\n background-color: #07c160;\n transition: background-color 150ms;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n top: 50%;\n margin-top: -17.625px;\n pointer-events: auto;\n z-index: 2;\n appearance: none; }\n .slider-container .o-slider::-ms-thumb:hover, .slider-container .o-slider::-ms-thumb:focus {\n background-color: #059048; }\n\n.is-round .slider-track {\n border-radius: 8px; }\n\n.is-round .o-slider::-webkit-slider-thumb {\n outline-offset: -10px;\n border-radius: 50%;\n -webkit-appearance: none; }\n .is-round .o-slider::-webkit-slider-thumb:hover, .is-round .o-slider::-webkit-slider-thumb:focus {\n outline-offset: -12px; }\n\n.is-round .o-slider::-moz-range-thumb {\n outline-offset: -10px;\n border-radius: 50%;\n -webkit-appearance: none; }\n .is-round .o-slider::-moz-range-thumb:hover, .is-round .o-slider::-moz-range-thumb:focus {\n outline-offset: -12px; }\n\n.is-round .o-slider::-ms-thumb {\n outline-offset: -10px;\n border-radius: 50%;\n appearance: none; }\n .is-round .o-slider::-ms-thumb:hover, .is-round .o-slider::-ms-thumb:focus {\n outline-offset: -12px; }\n\n.is-disabled .slider-track {\n border-color: #c0c4cc; }\n\n.is-disabled .o-slider::-webkit-slider-thumb {\n position: relative;\n height: 31.25px;\n width: 31.25px;\n background-color: #07c160;\n transition: background-color 150ms;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n top: 50%;\n margin-top: -17.625px;\n pointer-events: auto;\n z-index: 2;\n pointer-events: none;\n cursor: none;\n background-color: #c0c4cc;\n -webkit-appearance: none; }\n .is-disabled .o-slider::-webkit-slider-thumb:hover, .is-disabled .o-slider::-webkit-slider-thumb:focus {\n background-color: #059048; }\n\n.is-disabled .o-slider::-moz-range-thumb {\n position: relative;\n height: 31.25px;\n width: 31.25px;\n background-color: #07c160;\n transition: background-color 150ms;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n top: 50%;\n margin-top: -17.625px;\n pointer-events: auto;\n z-index: 2;\n pointer-events: none;\n cursor: none;\n background-color: #c0c4cc;\n -webkit-appearance: none; }\n .is-disabled .o-slider::-moz-range-thumb:hover, .is-disabled .o-slider::-moz-range-thumb:focus {\n background-color: #059048; }\n\n.is-disabled .o-slider::-ms-thumb {\n position: relative;\n height: 31.25px;\n width: 31.25px;\n background-color: #07c160;\n transition: background-color 150ms;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n top: 50%;\n margin-top: -17.625px;\n pointer-events: auto;\n z-index: 2;\n pointer-events: none;\n cursor: none;\n background-color: #c0c4cc;\n appearance: none; }\n .is-disabled .o-slider::-ms-thumb:hover, .is-disabled .o-slider::-ms-thumb:focus {\n background-color: #059048; }\n\n.is-vertical {\n transform: rotate(-90deg); }\n", ""]); // exports @@ -268,18 +268,26 @@ var OSlider = /** @class */ (function (_super) { function OSlider() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.sliderMax = _this.props.max; - _this.handleSliderOne = function () { + _this.handleSliderOne = function (evt) { var first_value = parseInt(_this.rootNode.children[0].value); - if (_this.__$second_value === null || first_value <= _this.__$second_value) { + //! bad + if (first_value <= _this.__$second_value || !_this.props.double_range) { _this.__$value = first_value; + if (!_this.props.double_range) { + _this.fire('change', _this.__$value); + } + else { + _this.fire('change', [_this.__$value, _this.__$second_value]); + } } _this.fillColor(); _this.update(); }; - _this.handleSliderTwo = function () { + _this.handleSliderTwo = function (evt) { var second_value = parseInt(_this.rootNode.children[1].value); if (second_value >= _this.__$value) { _this.__$second_value = second_value; + _this.fire('change', [_this.__$value, _this.__$second_value]); } _this.fillColor(); _this.update(); @@ -310,9 +318,6 @@ var OSlider = /** @class */ (function (_super) { this.fillColor(); this.update(); }; - // updated() { - // console.log(this.__$value, this.__$second_value) - // } OSlider.prototype.render = function (props) { var _this = this; var cls = omi_1.extractClass(props, 'slider-container', { diff --git a/components/slider/src/index.js.map b/components/slider/src/index.js.map index 18c1583d9..de1667c3e 100644 --- a/components/slider/src/index.js.map +++ b/components/slider/src/index.js.map @@ -1 +1 @@ -{"version":3,"sources":["webpack://OSlider/webpack/universalModuleDefinition","webpack://OSlider/webpack/bootstrap","webpack://OSlider/./src/index.scss","webpack://OSlider/./node_modules/css-loader/lib/css-base.js","webpack://OSlider/./src/index.scss?2cb4","webpack://OSlider/./src/index.tsx","webpack://OSlider/external {\"commonjs\":\"omi\",\"commonjs2\":\"omi\",\"amd\":\"omi\",\"root\":\"Omi\"}"],"names":[],"mappings":"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AACb;AACA;AACA;AACA,cAAc,gBAAgB,sCAAsC,iBAAiB,EAAE;AACvF,6BAA6B,uDAAuD;AACpF;AACA;AACA;AACA;AACA,uBAAuB,sBAAsB;AAC7C;AACA;AACA,CAAC;AACD;AACA;AACA,gDAAgD,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4CAA4C,QAAQ;AACpD;AACA;AACA,8CAA8C,cAAc;AAC5D,YAAY,mBAAO,CAAC,gBAAK;AACzB,UAAU,mBAAO,CAAC,sCAAc;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,0CAA0C,QAAQ;AAClD;AACA,aAAa,EAAE;AACf,8BAA8B;AAC9B;AACA,iBAAiB,EAAE;AACnB,qDAAqD;AACrD;AACA,iBAAiB,EAAE;AACnB,4BAA4B;AAC5B;AACA,iBAAiB,EAAE;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;;;;;;;;;;;;ACrIA,iD","file":"index.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"omi\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"omi\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"OSlider\"] = factory(require(\"omi\"));\n\telse\n\t\troot[\"OSlider\"] = factory(root[\"Omi\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./src/index.tsx\");\n","exports = module.exports = require(\"../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \"@use 'sass:math';\\n:host {\\n display: -ms-grid;\\n display: grid; }\\n\\n.slider-container {\\n position: relative;\\n width: 100%;\\n height: 50px; }\\n\\n.slider-container .slider-track {\\n width: 100%;\\n position: relative;\\n margin: 5px;\\n height: 12.5px;\\n background-color: #ffffff;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\\n border: 2px solid #07c160;\\n transition: background-color 200ms;\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n outline: none;\\n margin: auto;\\n z-index: -1; }\\n\\n.slider-container .o-slider {\\n width: 100%;\\n height: 100%;\\n -webkit-appearance: none;\\n -moz-appearance: none;\\n appearance: none;\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n background: transparent;\\n z-index: 1;\\n pointer-events: none; }\\n .slider-container .o-slider:focus {\\n outline: none; }\\n .slider-container .o-slider::-webkit-slider-runnable-track {\\n -webkit-appearance: none;\\n height: 12.5px; }\\n .slider-container .o-slider::-moz-range-track {\\n -moz-appearance: none;\\n height: 12.5px; }\\n .slider-container .o-slider::-ms-track {\\n appearance: none;\\n height: 12.5px; }\\n .slider-container .o-slider::-webkit-slider-thumb {\\n position: relative;\\n height: 31.25px;\\n width: 31.25px;\\n background-color: #07c160;\\n top: 50%;\\n margin-top: -17.625px;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\\n pointer-events: auto;\\n z-index: 2;\\n transition: background-color 150ms;\\n -webkit-appearance: none; }\\n .slider-container .o-slider::-webkit-slider-thumb:hover, .slider-container .o-slider::-webkit-slider-thumb:focus {\\n background-color: #059048; }\\n .slider-container .o-slider::-moz-range-thumb {\\n position: relative;\\n height: 31.25px;\\n width: 31.25px;\\n background-color: #07c160;\\n top: 50%;\\n margin-top: -17.625px;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\\n pointer-events: auto;\\n z-index: 2;\\n transition: background-color 150ms;\\n -webkit-appearance: none; }\\n .slider-container .o-slider::-moz-range-thumb:hover, .slider-container .o-slider::-moz-range-thumb:focus {\\n background-color: #059048; }\\n .slider-container .o-slider::-ms-thumb {\\n position: relative;\\n height: 31.25px;\\n width: 31.25px;\\n background-color: #07c160;\\n top: 50%;\\n margin-top: -17.625px;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\\n pointer-events: auto;\\n z-index: 2;\\n transition: background-color 150ms;\\n appearance: none; }\\n .slider-container .o-slider::-ms-thumb:hover, .slider-container .o-slider::-ms-thumb:focus {\\n background-color: #059048; }\\n\\n.is-round .slider-track {\\n border-radius: 8px; }\\n\\n.is-round .o-slider::-webkit-slider-thumb {\\n outline-offset: -10px;\\n border-radius: 50%;\\n -webkit-appearance: none; }\\n .is-round .o-slider::-webkit-slider-thumb:hover, .is-round .o-slider::-webkit-slider-thumb:focus {\\n outline-offset: -12px; }\\n\\n.is-round .o-slider::-moz-range-thumb {\\n outline-offset: -10px;\\n border-radius: 50%;\\n -webkit-appearance: none; }\\n .is-round .o-slider::-moz-range-thumb:hover, .is-round .o-slider::-moz-range-thumb:focus {\\n outline-offset: -12px; }\\n\\n.is-round .o-slider::-ms-thumb {\\n outline-offset: -10px;\\n border-radius: 50%;\\n appearance: none; }\\n .is-round .o-slider::-ms-thumb:hover, .is-round .o-slider::-ms-thumb:focus {\\n outline-offset: -12px; }\\n\\n.is-disabled .slider-track {\\n border-color: #c0c4cc; }\\n\\n.is-disabled .o-slider::-webkit-slider-thumb {\\n position: relative;\\n height: 31.25px;\\n width: 31.25px;\\n background-color: #07c160;\\n top: 50%;\\n margin-top: -17.625px;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\\n pointer-events: auto;\\n z-index: 2;\\n transition: background-color 150ms;\\n pointer-events: none;\\n cursor: none;\\n background-color: #c0c4cc;\\n -webkit-appearance: none; }\\n .is-disabled .o-slider::-webkit-slider-thumb:hover, .is-disabled .o-slider::-webkit-slider-thumb:focus {\\n background-color: #059048; }\\n\\n.is-disabled .o-slider::-moz-range-thumb {\\n position: relative;\\n height: 31.25px;\\n width: 31.25px;\\n background-color: #07c160;\\n top: 50%;\\n margin-top: -17.625px;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\\n pointer-events: auto;\\n z-index: 2;\\n transition: background-color 150ms;\\n pointer-events: none;\\n cursor: none;\\n background-color: #c0c4cc;\\n -webkit-appearance: none; }\\n .is-disabled .o-slider::-moz-range-thumb:hover, .is-disabled .o-slider::-moz-range-thumb:focus {\\n background-color: #059048; }\\n\\n.is-disabled .o-slider::-ms-thumb {\\n position: relative;\\n height: 31.25px;\\n width: 31.25px;\\n background-color: #07c160;\\n top: 50%;\\n margin-top: -17.625px;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\\n pointer-events: auto;\\n z-index: 2;\\n transition: background-color 150ms;\\n pointer-events: none;\\n cursor: none;\\n background-color: #c0c4cc;\\n appearance: none; }\\n .is-disabled .o-slider::-ms-thumb:hover, .is-disabled .o-slider::-ms-thumb:focus {\\n background-color: #059048; }\\n\\n.is-vertical {\\n transform: rotate(-90deg); }\\n\", \"\"]);\n\n// exports\n","/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t// when a module is imported multiple times with different media queries.\n\t\t\t// I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n","\n var result = require(\"!!../node_modules/css-loader/index.js!../node_modules/resolve-url-loader/index.js!../node_modules/sass-loader/dist/cjs.js??ref--4-3!./index.scss\");\n\n if (typeof result === \"string\") {\n module.exports = result;\n } else {\n module.exports = result.toString();\n }\n ","\"use strict\";\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar omi_1 = require(\"omi\");\nvar css = require(\"./index.scss\");\nvar OSlider = /** @class */ (function (_super) {\n __extends(OSlider, _super);\n function OSlider() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.sliderMax = _this.props.max;\n _this.handleSliderOne = function () {\n var first_value = parseInt(_this.rootNode.children[0].value);\n if (_this.__$second_value === null || first_value <= _this.__$second_value) {\n _this.__$value = first_value;\n }\n _this.fillColor();\n _this.update();\n };\n _this.handleSliderTwo = function () {\n var second_value = parseInt(_this.rootNode.children[1].value);\n if (second_value >= _this.__$value) {\n _this.__$second_value = second_value;\n }\n _this.fillColor();\n _this.update();\n };\n _this.fillColor = function () {\n var percent1 = (_this.__$value / _this.props.max) * 100;\n var percent2 = (_this.__$second_value / _this.props.max) * 100;\n var lowerColor = '#07c160';\n var upperColor = '#ffffff';\n if (_this.props.disabled) {\n lowerColor = '#c0c4cc';\n }\n _this.props.double_range\n ? (_this.sliderTrack.style.background = \"linear-gradient(to right, \" + upperColor + \" \" + percent1 + \"% , \" + lowerColor + \" \" + percent1 + \"% , \" + lowerColor + \" \" + percent2 + \"%, \" + upperColor + \" \" + percent2 + \"%)\")\n : (_this.sliderTrack.style.background = \"linear-gradient(to right, \" + lowerColor + \" \" + percent1 + \"% , \" + lowerColor + \" \" + percent1 + \"% , \" + lowerColor + \" \" + percent2 + \"%, \" + upperColor + \" \" + percent2 + \"%)\");\n };\n return _this;\n }\n OSlider_1 = OSlider;\n OSlider.prototype.install = function () {\n this.props.value\n ? (this.__$value = this.props.value)\n : (this.__$value = OSlider_1.defaultProps.value);\n this.props.second_value;\n this.__$second_value = this.props.second_value;\n };\n OSlider.prototype.installed = function () {\n this.fillColor();\n this.update();\n };\n // updated() {\n // console.log(this.__$value, this.__$second_value)\n // }\n OSlider.prototype.render = function (props) {\n var _this = this;\n var cls = omi_1.extractClass(props, 'slider-container', {\n 'is-vertical': props.vertical,\n 'is-round': props.round,\n 'is-disabled': props.disabled,\n });\n return (omi_1.h(\"div\", __assign({}, cls, { ref: function (e) {\n _this.rootNode = e;\n } }),\n omi_1.h(\"input\", { class: \"o-slider\", type: \"range\", min: props.min, max: props.max, value: this.__$value, onInput: this.handleSliderOne, id: \"slider-1\", ref: function (e) {\n _this.sliderOne = e;\n } }),\n props.double_range && (omi_1.h(\"input\", { class: \"o-slider\", type: \"range\", min: props.min, max: props.max, value: this.__$second_value, onInput: this.handleSliderTwo, id: \"slider-2\", ref: function (e) {\n _this.sliderTwo = e;\n } })),\n omi_1.h(\"div\", { class: \"slider-track\", ref: function (e) {\n _this.sliderTrack = e;\n } })));\n };\n var OSlider_1;\n OSlider.css = css;\n OSlider.defaultProps = {\n min: 0,\n max: 100,\n step: 1,\n value: 0,\n //default a single square range slider\n double_range: false,\n vertical: false,\n round: false,\n disabled: false,\n };\n OSlider.propTypes = {\n min: Number,\n max: Number,\n step: Number,\n value: Number,\n second_value: Number,\n double_range: Boolean,\n vertical: Boolean,\n round: Boolean,\n disabled: Boolean,\n };\n OSlider = OSlider_1 = __decorate([\n omi_1.tag('o-slider')\n ], OSlider);\n return OSlider;\n}(omi_1.WeElement));\nexports.default = OSlider;\n","module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack://OSlider/webpack/universalModuleDefinition","webpack://OSlider/webpack/bootstrap","webpack://OSlider/./src/index.scss","webpack://OSlider/./node_modules/css-loader/lib/css-base.js","webpack://OSlider/./src/index.scss?2cb4","webpack://OSlider/./src/index.tsx","webpack://OSlider/external {\"commonjs\":\"omi\",\"commonjs2\":\"omi\",\"amd\":\"omi\",\"root\":\"Omi\"}"],"names":[],"mappings":"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AACb;AACA;AACA;AACA,cAAc,gBAAgB,sCAAsC,iBAAiB,EAAE;AACvF,6BAA6B,uDAAuD;AACpF;AACA;AACA;AACA;AACA,uBAAuB,sBAAsB;AAC7C;AACA;AACA,CAAC;AACD;AACA;AACA,gDAAgD,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4CAA4C,QAAQ;AACpD;AACA;AACA,8CAA8C,cAAc;AAC5D,YAAY,mBAAO,CAAC,gBAAK;AACzB,UAAU,mBAAO,CAAC,sCAAc;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,0CAA0C,QAAQ;AAClD;AACA,aAAa,EAAE;AACf,8BAA8B;AAC9B;AACA,iBAAiB,EAAE;AACnB,qDAAqD;AACrD;AACA,iBAAiB,EAAE;AACnB,4BAA4B;AAC5B;AACA,iBAAiB,EAAE;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;;;;;;;;;;;;AC1IA,iD","file":"index.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"omi\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"omi\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"OSlider\"] = factory(require(\"omi\"));\n\telse\n\t\troot[\"OSlider\"] = factory(root[\"Omi\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./src/index.tsx\");\n","exports = module.exports = require(\"../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \"@use 'sass:math';\\n:host {\\n display: -ms-grid;\\n display: grid; }\\n\\n.slider-container {\\n position: relative;\\n width: 100%;\\n height: 50px; }\\n\\n.slider-container .slider-track {\\n width: 100%;\\n position: relative;\\n margin: 5px;\\n height: 12.5px;\\n background-color: #ffffff;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\\n border: 2px solid #07c160;\\n transition: background-color 200ms;\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n outline: none;\\n margin: auto;\\n z-index: -1; }\\n\\n.slider-container .o-slider {\\n width: 100%;\\n height: 100%;\\n -webkit-appearance: none;\\n -moz-appearance: none;\\n appearance: none;\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n background: transparent;\\n z-index: 1;\\n pointer-events: none; }\\n .slider-container .o-slider:focus {\\n outline: none; }\\n .slider-container .o-slider::-webkit-slider-runnable-track {\\n -webkit-appearance: none;\\n height: 12.5px; }\\n .slider-container .o-slider::-moz-range-track {\\n -moz-appearance: none;\\n height: 12.5px; }\\n .slider-container .o-slider::-ms-track {\\n appearance: none;\\n height: 12.5px; }\\n .slider-container .o-slider::-webkit-slider-thumb {\\n position: relative;\\n height: 31.25px;\\n width: 31.25px;\\n background-color: #07c160;\\n transition: background-color 150ms;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\\n top: 50%;\\n margin-top: -17.625px;\\n pointer-events: auto;\\n z-index: 2;\\n -webkit-appearance: none; }\\n .slider-container .o-slider::-webkit-slider-thumb:hover, .slider-container .o-slider::-webkit-slider-thumb:focus {\\n background-color: #059048; }\\n .slider-container .o-slider::-moz-range-thumb {\\n position: relative;\\n height: 31.25px;\\n width: 31.25px;\\n background-color: #07c160;\\n transition: background-color 150ms;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\\n top: 50%;\\n margin-top: -17.625px;\\n pointer-events: auto;\\n z-index: 2;\\n -webkit-appearance: none; }\\n .slider-container .o-slider::-moz-range-thumb:hover, .slider-container .o-slider::-moz-range-thumb:focus {\\n background-color: #059048; }\\n .slider-container .o-slider::-ms-thumb {\\n position: relative;\\n height: 31.25px;\\n width: 31.25px;\\n background-color: #07c160;\\n transition: background-color 150ms;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\\n top: 50%;\\n margin-top: -17.625px;\\n pointer-events: auto;\\n z-index: 2;\\n appearance: none; }\\n .slider-container .o-slider::-ms-thumb:hover, .slider-container .o-slider::-ms-thumb:focus {\\n background-color: #059048; }\\n\\n.is-round .slider-track {\\n border-radius: 8px; }\\n\\n.is-round .o-slider::-webkit-slider-thumb {\\n outline-offset: -10px;\\n border-radius: 50%;\\n -webkit-appearance: none; }\\n .is-round .o-slider::-webkit-slider-thumb:hover, .is-round .o-slider::-webkit-slider-thumb:focus {\\n outline-offset: -12px; }\\n\\n.is-round .o-slider::-moz-range-thumb {\\n outline-offset: -10px;\\n border-radius: 50%;\\n -webkit-appearance: none; }\\n .is-round .o-slider::-moz-range-thumb:hover, .is-round .o-slider::-moz-range-thumb:focus {\\n outline-offset: -12px; }\\n\\n.is-round .o-slider::-ms-thumb {\\n outline-offset: -10px;\\n border-radius: 50%;\\n appearance: none; }\\n .is-round .o-slider::-ms-thumb:hover, .is-round .o-slider::-ms-thumb:focus {\\n outline-offset: -12px; }\\n\\n.is-disabled .slider-track {\\n border-color: #c0c4cc; }\\n\\n.is-disabled .o-slider::-webkit-slider-thumb {\\n position: relative;\\n height: 31.25px;\\n width: 31.25px;\\n background-color: #07c160;\\n transition: background-color 150ms;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\\n top: 50%;\\n margin-top: -17.625px;\\n pointer-events: auto;\\n z-index: 2;\\n pointer-events: none;\\n cursor: none;\\n background-color: #c0c4cc;\\n -webkit-appearance: none; }\\n .is-disabled .o-slider::-webkit-slider-thumb:hover, .is-disabled .o-slider::-webkit-slider-thumb:focus {\\n background-color: #059048; }\\n\\n.is-disabled .o-slider::-moz-range-thumb {\\n position: relative;\\n height: 31.25px;\\n width: 31.25px;\\n background-color: #07c160;\\n transition: background-color 150ms;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\\n top: 50%;\\n margin-top: -17.625px;\\n pointer-events: auto;\\n z-index: 2;\\n pointer-events: none;\\n cursor: none;\\n background-color: #c0c4cc;\\n -webkit-appearance: none; }\\n .is-disabled .o-slider::-moz-range-thumb:hover, .is-disabled .o-slider::-moz-range-thumb:focus {\\n background-color: #059048; }\\n\\n.is-disabled .o-slider::-ms-thumb {\\n position: relative;\\n height: 31.25px;\\n width: 31.25px;\\n background-color: #07c160;\\n transition: background-color 150ms;\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\\n top: 50%;\\n margin-top: -17.625px;\\n pointer-events: auto;\\n z-index: 2;\\n pointer-events: none;\\n cursor: none;\\n background-color: #c0c4cc;\\n appearance: none; }\\n .is-disabled .o-slider::-ms-thumb:hover, .is-disabled .o-slider::-ms-thumb:focus {\\n background-color: #059048; }\\n\\n.is-vertical {\\n transform: rotate(-90deg); }\\n\", \"\"]);\n\n// exports\n","/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t// when a module is imported multiple times with different media queries.\n\t\t\t// I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n","\n var result = require(\"!!../node_modules/css-loader/index.js!../node_modules/resolve-url-loader/index.js!../node_modules/sass-loader/dist/cjs.js??ref--4-3!./index.scss\");\n\n if (typeof result === \"string\") {\n module.exports = result;\n } else {\n module.exports = result.toString();\n }\n ","\"use strict\";\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar omi_1 = require(\"omi\");\nvar css = require(\"./index.scss\");\nvar OSlider = /** @class */ (function (_super) {\n __extends(OSlider, _super);\n function OSlider() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.sliderMax = _this.props.max;\n _this.handleSliderOne = function (evt) {\n var first_value = parseInt(_this.rootNode.children[0].value);\n //! bad\n if (first_value <= _this.__$second_value || !_this.props.double_range) {\n _this.__$value = first_value;\n if (!_this.props.double_range) {\n _this.fire('change', _this.__$value);\n }\n else {\n _this.fire('change', [_this.__$value, _this.__$second_value]);\n }\n }\n _this.fillColor();\n _this.update();\n };\n _this.handleSliderTwo = function (evt) {\n var second_value = parseInt(_this.rootNode.children[1].value);\n if (second_value >= _this.__$value) {\n _this.__$second_value = second_value;\n _this.fire('change', [_this.__$value, _this.__$second_value]);\n }\n _this.fillColor();\n _this.update();\n };\n _this.fillColor = function () {\n var percent1 = (_this.__$value / _this.props.max) * 100;\n var percent2 = (_this.__$second_value / _this.props.max) * 100;\n var lowerColor = '#07c160';\n var upperColor = '#ffffff';\n if (_this.props.disabled) {\n lowerColor = '#c0c4cc';\n }\n _this.props.double_range\n ? (_this.sliderTrack.style.background = \"linear-gradient(to right, \" + upperColor + \" \" + percent1 + \"% , \" + lowerColor + \" \" + percent1 + \"% , \" + lowerColor + \" \" + percent2 + \"%, \" + upperColor + \" \" + percent2 + \"%)\")\n : (_this.sliderTrack.style.background = \"linear-gradient(to right, \" + lowerColor + \" \" + percent1 + \"% , \" + lowerColor + \" \" + percent1 + \"% , \" + lowerColor + \" \" + percent2 + \"%, \" + upperColor + \" \" + percent2 + \"%)\");\n };\n return _this;\n }\n OSlider_1 = OSlider;\n OSlider.prototype.install = function () {\n this.props.value\n ? (this.__$value = this.props.value)\n : (this.__$value = OSlider_1.defaultProps.value);\n this.props.second_value;\n this.__$second_value = this.props.second_value;\n };\n OSlider.prototype.installed = function () {\n this.fillColor();\n this.update();\n };\n OSlider.prototype.render = function (props) {\n var _this = this;\n var cls = omi_1.extractClass(props, 'slider-container', {\n 'is-vertical': props.vertical,\n 'is-round': props.round,\n 'is-disabled': props.disabled,\n });\n return (omi_1.h(\"div\", __assign({}, cls, { ref: function (e) {\n _this.rootNode = e;\n } }),\n omi_1.h(\"input\", { class: \"o-slider\", type: \"range\", min: props.min, max: props.max, value: this.__$value, onInput: this.handleSliderOne, id: \"slider-1\", ref: function (e) {\n _this.sliderOne = e;\n } }),\n props.double_range && (omi_1.h(\"input\", { class: \"o-slider\", type: \"range\", min: props.min, max: props.max, value: this.__$second_value, onInput: this.handleSliderTwo, id: \"slider-2\", ref: function (e) {\n _this.sliderTwo = e;\n } })),\n omi_1.h(\"div\", { class: \"slider-track\", ref: function (e) {\n _this.sliderTrack = e;\n } })));\n };\n var OSlider_1;\n OSlider.css = css;\n OSlider.defaultProps = {\n min: 0,\n max: 100,\n step: 1,\n value: 0,\n //default a single square range slider\n double_range: false,\n vertical: false,\n round: false,\n disabled: false,\n };\n OSlider.propTypes = {\n min: Number,\n max: Number,\n step: Number,\n value: Number,\n second_value: Number,\n double_range: Boolean,\n vertical: Boolean,\n round: Boolean,\n disabled: Boolean,\n };\n OSlider = OSlider_1 = __decorate([\n omi_1.tag('o-slider')\n ], OSlider);\n return OSlider;\n}(omi_1.WeElement));\nexports.default = OSlider;\n","module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;"],"sourceRoot":""} \ No newline at end of file diff --git a/components/slider/src/index.tsx b/components/slider/src/index.tsx index e930ca4cd..9813fb112 100644 --- a/components/slider/src/index.tsx +++ b/components/slider/src/index.tsx @@ -43,33 +43,37 @@ export default class OSlider extends WeElement { } __$value: number - __$second_value: number rootNode sliderOne sliderTwo - sliderTrack - sliderMax = this.props.max - handleSliderOne = () => { + handleSliderOne = (evt) => { const first_value = parseInt(this.rootNode.children[0].value) - if (this.__$second_value === null || first_value <= this.__$second_value) { + //! bad + if (first_value <= this.__$second_value || !this.props.double_range) { this.__$value = first_value + if (!this.props.double_range) { + this.fire('change', this.__$value) + } else { + this.fire('change', [this.__$value, this.__$second_value]) + } } this.fillColor() this.update() } - handleSliderTwo = () => { + handleSliderTwo = (evt) => { const second_value = parseInt(this.rootNode.children[1].value) - if (second_value >= this.__$value) { this.__$second_value = second_value + this.fire('change', [this.__$value, this.__$second_value]) } + this.fillColor() this.update() } @@ -101,10 +105,6 @@ export default class OSlider extends WeElement { this.update() } - // updated() { - // console.log(this.__$value, this.__$second_value) - // } - render(props) { const cls = extractClass(props, 'slider-container', { 'is-vertical': props.vertical,