vue-material-slider
Version:
A material design slider build with vue. [Live demo](https://codesandbox.io/s/priceless-raman-6s9ey?file=/src/App.vue)
1,615 lines (1,303 loc) • 93 kB
JavaScript
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "fb15");
/******/ })
/************************************************************************/
/******/ ({
/***/ "06cf":
/***/ (function(module, exports, __webpack_require__) {
var DESCRIPTORS = __webpack_require__("83ab");
var propertyIsEnumerableModule = __webpack_require__("d1e7");
var createPropertyDescriptor = __webpack_require__("5c6c");
var toIndexedObject = __webpack_require__("fc6a");
var toPrimitive = __webpack_require__("c04e");
var has = __webpack_require__("5135");
var IE8_DOM_DEFINE = __webpack_require__("0cfb");
var nativeGetOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
// `Object.getOwnPropertyDescriptor` method
// https://tc39.github.io/ecma262/#sec-object.getownpropertydescriptor
exports.f = DESCRIPTORS ? nativeGetOwnPropertyDescriptor : function getOwnPropertyDescriptor(O, P) {
O = toIndexedObject(O);
P = toPrimitive(P, true);
if (IE8_DOM_DEFINE) try {
return nativeGetOwnPropertyDescriptor(O, P);
} catch (error) { /* empty */ }
if (has(O, P)) return createPropertyDescriptor(!propertyIsEnumerableModule.f.call(O, P), O[P]);
};
/***/ }),
/***/ "0cfb":
/***/ (function(module, exports, __webpack_require__) {
var DESCRIPTORS = __webpack_require__("83ab");
var fails = __webpack_require__("d039");
var createElement = __webpack_require__("cc12");
// Thank's IE8 for his funny defineProperty
module.exports = !DESCRIPTORS && !fails(function () {
return Object.defineProperty(createElement('div'), 'a', {
get: function () { return 7; }
}).a != 7;
});
/***/ }),
/***/ "1793":
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "1bd8":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// EXTERNAL MODULE: ./src/components/base-slider.js + 1 modules
var base_slider = __webpack_require__("2d54");
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/slider.vue?vue&type=script&lang=js&
const CLASS_NAME = 'slider';
/* harmony default export */ var slidervue_type_script_lang_js_ = ({
name: "vue-material-slider",
extends: base_slider["a" /* default */],
computed: {
baseCls() {
return CLASS_NAME;
}
},
render() {
return this.createSlider();
}
});
// CONCATENATED MODULE: ./src/components/slider.vue?vue&type=script&lang=js&
/* harmony default export */ var components_slidervue_type_script_lang_js_ = (slidervue_type_script_lang_js_);
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__("2877");
// CONCATENATED MODULE: ./src/components/slider.vue
var render, staticRenderFns
function injectStyles (context) {
var style0 = __webpack_require__("2519")
if (style0.__inject__) style0.__inject__(context)
}
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
components_slidervue_type_script_lang_js_,
render,
staticRenderFns,
false,
injectStyles,
null,
null
,true
)
/* harmony default export */ var slider = __webpack_exports__["a"] = (component.exports);
/***/ }),
/***/ "1be4":
/***/ (function(module, exports, __webpack_require__) {
var getBuiltIn = __webpack_require__("d066");
module.exports = getBuiltIn('document', 'documentElement');
/***/ }),
/***/ "1d80":
/***/ (function(module, exports) {
// `RequireObjectCoercible` abstract operation
// https://tc39.github.io/ecma262/#sec-requireobjectcoercible
module.exports = function (it) {
if (it == undefined) throw TypeError("Can't call method on " + it);
return it;
};
/***/ }),
/***/ "23cb":
/***/ (function(module, exports, __webpack_require__) {
var toInteger = __webpack_require__("a691");
var max = Math.max;
var min = Math.min;
// Helper for a popular repeating case of the spec:
// Let integer be ? ToInteger(index).
// If integer < 0, let result be max((length + integer), 0); else let result be min(integer, length).
module.exports = function (index, length) {
var integer = toInteger(index);
return integer < 0 ? max(integer + length, 0) : min(integer, length);
};
/***/ }),
/***/ "23e7":
/***/ (function(module, exports, __webpack_require__) {
var global = __webpack_require__("da84");
var getOwnPropertyDescriptor = __webpack_require__("06cf").f;
var createNonEnumerableProperty = __webpack_require__("9112");
var redefine = __webpack_require__("6eeb");
var setGlobal = __webpack_require__("ce4e");
var copyConstructorProperties = __webpack_require__("e893");
var isForced = __webpack_require__("94ca");
/*
options.target - name of the target object
options.global - target is the global object
options.stat - export as static methods of target
options.proto - export as prototype methods of target
options.real - real prototype method for the `pure` version
options.forced - export even if the native feature is available
options.bind - bind methods to the target, required for the `pure` version
options.wrap - wrap constructors to preventing global pollution, required for the `pure` version
options.unsafe - use the simple assignment of property instead of delete + defineProperty
options.sham - add a flag to not completely full polyfills
options.enumerable - export as enumerable property
options.noTargetGet - prevent calling a getter on target
*/
module.exports = function (options, source) {
var TARGET = options.target;
var GLOBAL = options.global;
var STATIC = options.stat;
var FORCED, target, key, targetProperty, sourceProperty, descriptor;
if (GLOBAL) {
target = global;
} else if (STATIC) {
target = global[TARGET] || setGlobal(TARGET, {});
} else {
target = (global[TARGET] || {}).prototype;
}
if (target) for (key in source) {
sourceProperty = source[key];
if (options.noTargetGet) {
descriptor = getOwnPropertyDescriptor(target, key);
targetProperty = descriptor && descriptor.value;
} else targetProperty = target[key];
FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? '.' : '#') + key, options.forced);
// contained in target
if (!FORCED && targetProperty !== undefined) {
if (typeof sourceProperty === typeof targetProperty) continue;
copyConstructorProperties(sourceProperty, targetProperty);
}
// add a flag to not completely full polyfills
if (options.sham || (targetProperty && targetProperty.sham)) {
createNonEnumerableProperty(sourceProperty, 'sham', true);
}
// extend global
redefine(target, key, sourceProperty, options);
}
};
/***/ }),
/***/ "241c":
/***/ (function(module, exports, __webpack_require__) {
var internalObjectKeys = __webpack_require__("ca84");
var enumBugKeys = __webpack_require__("7839");
var hiddenKeys = enumBugKeys.concat('length', 'prototype');
// `Object.getOwnPropertyNames` method
// https://tc39.github.io/ecma262/#sec-object.getownpropertynames
exports.f = Object.getOwnPropertyNames || function getOwnPropertyNames(O) {
return internalObjectKeys(O, hiddenKeys);
};
/***/ }),
/***/ "2519":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_slider_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("d4f7");
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_slider_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_slider_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_slider_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__) if(["default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_slider_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/***/ }),
/***/ "2877":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
function normalizeComponent (
scriptExports,
render,
staticRenderFns,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier, /* server only */
shadowMode /* vue-cli only */
) {
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (render) {
options.render = render
options.staticRenderFns = staticRenderFns
options._compiled = true
}
// functional template
if (functionalTemplate) {
options.functional = true
}
// scopedId
if (scopeId) {
options._scopeId = 'data-v-' + scopeId
}
var hook
if (moduleIdentifier) { // server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__
}
// inject component styles
if (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier)
}
}
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook
} else if (injectStyles) {
hook = shadowMode
? function () {
injectStyles.call(
this,
(options.functional ? this.parent : this).$root.$options.shadowRoot
)
}
: injectStyles
}
if (hook) {
if (options.functional) {
// for template-only hot-reload because in that case the render fn doesn't
// go through the normalizer
options._injectStyles = hook
// register for functional component in vue file
var originalRender = options.render
options.render = function renderWithStyleInjection (h, context) {
hook.call(context)
return originalRender(h, context)
}
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate
options.beforeCreate = existing
? [].concat(existing, hook)
: [hook]
}
}
return {
exports: scriptExports,
options: options
}
}
/***/ }),
/***/ "2d54":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
// CONCATENATED MODULE: ./src/keycodes.js
const PAGE_UP = 33;
const PAGE_DOWN = 34;
const END = 35;
const HOME = 36;
const LEFT_ARROW = 37;
const UP_ARROW = 38;
const RIGHT_ARROW = 39;
const DOWN_ARROW = 40;
// CONCATENATED MODULE: ./src/components/base-slider.js
/** The thumb gap size for a disabled slider. */
const DISABLED_THUMB_GAP = {
name: '--disabled-thumb-gap',
fallback: '7px'
};
/** The thumb gap size for a non-active slider at its minimum value. */
const MIN_VALUE_NONACTIVE_THUMB_GAP = {
name: '--min-value-nonactive-thumb-gap',
fallback: '7px'
};
/** The thumb gap size for an active slider at its minimum value. */
const MIN_VALUE_ACTIVE_THUMB_GAP = {
name: '--min-value-active-thumb-gap',
fallback: '10px'
};
/** Emits a CSS expression referencing one of the above variables or a numeric literal. */
function referenceCssVariable(negative, variable) {
if (typeof variable === 'number') {
return negative ? `-${variable}px` : `${variable}px`;
} else {
return negative ? `calc(0px - var(${variable.name}, ${variable.fallback}))` : `var(${variable.name}, ${variable.fallback})`;
}
}
/** Returns the window element for the givent el. */
function getWindowForElement(element) {
var doc = element.ownerDocument || element;
return doc.defaultView || doc.parentWindow || window;
}
/* harmony default export */ var base_slider = __webpack_exports__["a"] = (external_commonjs_vue_commonjs2_vue_root_Vue_default.a.extend({
props: {
value: {
type: [Number, String, Array],
default: 0
},
min: {
type: [Number, String],
default: 0
},
max: {
type: [Number, String],
default: 100
},
disabled: {
type: Boolean,
default: false
},
invert: {
type: Boolean,
default: false
},
vertical: {
type: Boolean,
default: false
},
tabindex: {
type: Number,
default: 0
},
thumbLabel: {
type: Boolean,
default: false
},
dir: {
type: String,
validator: value => value.includes("rtl") || value.includes("ltr"),
default: "ltr"
},
displayWith: {
type: Function,
default: null
},
stepSize: {
type: [String, Number],
default: 1
}
},
watch: {
value(val) {
this.setLocalValue(val);
},
stepSize(val) {
this.localStep = val;
}
},
computed: {
displayValue() {
if (this.displayWith) {
return this.displayWith(this.localValue);
} // When incrementing using a decimal value make sure its rounded
if (this.roundToDecimal && this.localValue && this.localValue % 1 !== 0) {
return this.localValue.toFixed(this.roundToDecimal);
}
return this.localValue;
},
step: {
get() {
return this.localStep;
},
set(v) {
this.localStep = v;
if (this.localStep % 1 !== 0) {
this.roundToDecimal = this.localStep.toString().split(".").pop().length;
}
}
},
thumbGap() {
if (this.disabled) {
return DISABLED_THUMB_GAP;
}
if (this.isMinValue && !this.thumbLabel) {
return this.isActive ? MIN_VALUE_ACTIVE_THUMB_GAP : MIN_VALUE_NONACTIVE_THUMB_GAP;
}
return 0;
},
percent() {
return this.clamp(this.localPercent);
},
invertAxis() {
// Standard non-inverted mode for a vertical slider should be dragging the thumb from bottom to
// top. However from a y-axis standpoint this is inverted.
return this.vertical ? !this.invert : this.invert;
},
isMinValue() {
return this.percent === 0;
}
},
data() {
return {
isSliding: false,
isActive: false,
sliderDimensions: null,
roundToDecimal: null,
localStep: null,
localPercent: 0,
localValue: 0,
localValueOnSlideStart: null,
activeThumb: 0
};
},
mounted() {
// Mousemove/mouseup are bound to the window so they area always recognised
const el = this.$el;
const win = getWindowForElement(this.$el);
this.addEventListener(win, "mousemove", this.onSlide);
this.addEventListener(win, "mouseup", this.onSlideEnd);
this.addEventListener(el, "touchstart", this.onSlideStart);
this.addEventListener(el, "touchmove", this.onSlide);
this.addEventListener(el, "touchend", this.onSlideEnd);
this.addEventListener(el, "touchcancel", this.onSlideEnd);
this.sliderDimensions = this.getSliderDimensions();
this.setLocalValue(this.value); // Set initial values
this.step = this.stepSize;
},
methods: {
thumbContainerStyles(percent) {
let axis = this.vertical ? "Y" : "X"; // For a horizontal slider in RTL languages we push the thumb container off the left edge
// instead of the right edge to avoid causing a horizontal scrollbar to appear.
let invertOffset = this.getDirection() == "rtl" && !this.vertical ? !this.invertAxis : this.invertAxis;
let offset = (invertOffset ? percent : 1 - percent) * 100;
return {
transform: `translate${axis}(-${offset}%)`
};
},
trackBackgroundStyles(percent) {
const axis = this.vertical ? "Y" : "X";
const scale = this.vertical ? `1, ${1 - percent}, 1` : `${1 - percent}, 1, 1`;
const neg = this.shouldInvertMouseCoords();
return {
// scale3d avoids some rendering issues in Chrome. See #12071.
transform: `translate${axis}(${referenceCssVariable(neg, this.thumbGap)}) scale3d(${scale})`
};
},
trackFillStyles(percent) {
const axis = this.vertical ? "Y" : "X";
const scale = this.vertical ? `1, ${percent}, 1` : `${percent}, 1, 1`;
const neg = !this.shouldInvertMouseCoords();
return {
// scale3d avoids some rendering issues in Chrome. See #12071.
transform: `translate${axis}(${referenceCssVariable(neg, this.thumbGap)}) scale3d(${scale})`
};
},
onMouseenter() {
if (this.disabled) {
return;
} // We save the dimensions of the slider here so we can use them to update the spacing of the
// ticks and determine where on the slider click and slide events happen.
this.sliderDimensions = this.getSliderDimensions();
},
onMousedown(event) {
// Don't do anything if the slider is disabled or the
// user is using anything other than the main mouse button.
if (this.disabled || event.button !== 0) {
return;
}
this.isSliding = false;
this.focusHostElement();
const position = this.getTouchPoint(event);
this.updateValueFromPosition(position); // Emit a change and input event if the value changed.
this.emitChangeEvent();
},
onSlide(event) {
if (this.disabled || !this.isActive) {
return;
}
this.isSliding = true;
event.preventDefault();
const position = this.getTouchPoint(event);
this.updateValueFromPosition(position);
},
onSlideStart(event) {
if (this.disabled || this.isSliding) {
return;
} // Simulate mouseenter in case this is a mobile device.
this.onMouseenter();
this.focusHostElement();
this.localValueOnSlideStart = this.localValue;
if (event) {
const position = this.getTouchPoint(event);
this.updateValueFromPosition(position);
event.preventDefault();
}
},
onSlideEnd() {
this.isSliding = false;
if (this.localValueOnSlideStart !== null && !this.disabled) {
this.emitChangeEvent();
}
this.localValueOnSlideStart = null;
this.isActive = false;
},
onKeyup() {
this.isSliding = false;
},
onFocus() {
this.sliderDimensions = this.getSliderDimensions();
},
onBlur() {
this.isActive = false;
},
updateValueFromPosition({
x,
y
}) {
if (!this.sliderDimensions) {
return;
}
let offset = this.vertical ? this.sliderDimensions.top : this.sliderDimensions.left;
let size = this.vertical ? this.sliderDimensions.height : this.sliderDimensions.width;
let position = this.vertical ? y : x; // The exact value is calculated from the event and used to find the closest snap value.
let percent = this.clamp((position - offset) / size);
if (this.shouldInvertMouseCoords()) {
percent = 1 - percent;
}
let value; // Since the steps may not divide cleanly into the max value, if the user
// slide to 0 or 100 percent, we jump to the min/max value. This approach
// is slightly more intuitive than using `Math.ceil` below, because it
// follows the user's pointer closer.
if (percent === 0) {
value = this.min;
} else if (percent === 1) {
value = this.max;
} else {
const exactValue = this.calculateValue(percent); // This calculation finds the closest step by finding the closest
// whole number divisible by the step relative to the min.
const closestValue = Math.round((exactValue - this.min) / this.step) * this.step + this.min; // The value needs to snap to the min and max.
value = this.clamp(closestValue, this.min, this.max);
}
this.setLocalValue(value);
},
onKeydown(event) {
if (this.disabled) {
return;
}
switch (event.keyCode) {
case PAGE_UP:
this.increment(10);
break;
case PAGE_DOWN:
this.increment(-10);
break;
case END:
this.setLocalValue(this.max);
break;
case HOME:
this.setLocalValue(this.min);
break;
case LEFT_ARROW:
// NOTE: For a sighted user it would make more sense that when they press an arrow key on an
// inverted slider the thumb moves in that direction. However for a blind user, nothing
// about the slider indicates that it is inverted. They will expect left to be decrement,
// regardless of how it appears on the screen. For speakers ofRTL languages, they probably
// expect left to mean increment. Therefore we flip the meaning of the side arrow keys for
// RTL. For inverted sliders we prefer a good a11y experience to having it "look right" for
// sighted users, therefore we do not swap the meaning.
this.increment(this.getDirection() == "rtl" ? 1 : -1);
break;
case UP_ARROW:
this.increment(1);
break;
case RIGHT_ARROW:
// See comment on LEFT_ARROW about the conditions under which we flip the meaning.
this.increment(this.getDirection() == "rtl" ? -1 : 1);
break;
case DOWN_ARROW:
this.increment(-1);
break;
default:
// Return if the key is not one that we explicitly handle to avoid calling preventDefault on
// it.
return;
}
this.emitChangeEvent();
this.isSliding = true;
event.preventDefault();
},
increment(numSteps) {
let value = this.clamp((this.localValue || 0) + this.step * numSteps, this.min, this.max);
this.setLocalValue(value);
},
getSliderDimensions() {
return this.$refs.slider ? this.$refs.slider.getBoundingClientRect() : null;
},
clamp(value, min = 0, max = 1) {
return Math.max(min, Math.min(value || 0, max));
},
focusHostElement() {
this.isActive = true;
this.$refs.slider.focus();
},
calculateValue(percentage) {
return this.min + percentage * (this.max - this.min);
},
calculatePercentage(value) {
return ((value || 0) - this.min) / (this.max - this.min);
},
emitChangeEvent() {
this.$emit("change", this.localValue);
},
emitInputEvent(newValue, oldValue) {
if (newValue != oldValue) {
this.$emit("input", newValue);
}
},
getDirection() {
return this.dir == "rtl" ? "rtl" : "ltr";
},
shouldInvertMouseCoords() {
return this.getDirection() == "rtl" && !this.vertical ? !this.invertAxis : this.invertAxis;
},
addEventListener(el, event, handler) {
el.addEventListener(event, handler.bind(this));
this.$once("hook:beforeDestroy", () => {
el.removeEventListener(event, handler);
});
},
getTouchPoint(event) {
const {
clientX,
clientY
} = event.touches && event.touches[0] || event;
return {
x: clientX,
y: clientY
};
},
setLocalValue(v) {
if (v !== this.localValue) {
let value = v; // While incrementing by a decimal we can end up with values like 33.300000000000004.
// Truncate it to ensure that it matches the label and to make it easier to work with.
if (this.roundToDecimal) {
value = parseFloat(value.toFixed(this.roundToDecimal));
}
const oldValue = this.localValue;
this.localValue = value;
this.localPercent = this.calculatePercentage(this.localValue);
this.emitInputEvent(this.localValue, oldValue);
}
},
createSlider() {
const h = this.$createElement; // Create track, thumbs etc..
const children = this.createChildren();
const wrapper = this.createWrapper(children);
return h('div', {
staticClass: this.baseCls,
class: {
'slider-disabled': this.disabled,
'slider-vertical': this.vertical,
'slider-sliding': this.isSliding,
'slider-horizontal': !this.vertical,
'slider-axis-inverted': this.invertAxis,
'slider-focused': this.isActive,
'slider-thumb-label-showing': this.thumbLabel
},
on: {
mouseenter: this.onMouseenter,
mousedown: this.onMousedown,
keydown: this.onKeydown,
focus: this.onFocus,
keyup: this.onKeyup,
blur: this.onBlur
}
}, [wrapper]);
},
createChildren() {
return [this.createTrack(), this.createThumb(this.percent)];
},
createWrapper(children) {
const h = this.$createElement;
return h('div', {
ref: "slider",
staticClass: 'slider-wrapper',
class: {
'slider-sliding': this.isSliding
}
}, children);
},
createTrackFill(percent) {
const h = this.$createElement;
return h('div', {
staticClass: 'slider-track-fill',
style: this.trackFillStyles(percent)
});
},
createTrack() {
const h = this.$createElement;
const background = h('div', {
staticClass: 'slider-track-background',
style: this.trackBackgroundStyles(this.percent)
});
return h('div', {
staticClass: 'slider-track-wrapper'
}, [background, this.createTrackFill(this.percent)]);
},
createThumb(percent, listeners = {}, isActive = this.isActive) {
const h = this.$createElement;
const thumbText = isActive ? h('span', {
staticClass: 'slider-thumb-label-text'
}, this.displayValue) : h();
const focusEl = h('div', {
staticClass: 'slider-focus-ring'
});
const thumb = h('div', {
staticClass: 'slider-thumb'
});
const thumbLabel = h('div', {
staticClass: 'slider-thumb-label'
}, [thumbText]);
return h('div', {
staticClass: 'slider-thumb-container',
class: {
'slider-thumb-active': isActive,
'slider-min-value': this.isMinValue
},
style: this.thumbContainerStyles(percent),
on: { ...listeners
},
attrs: {
tabindex: 0
}
}, [focusEl, thumb, thumbLabel]);
}
}
}));
/***/ }),
/***/ "37e8":
/***/ (function(module, exports, __webpack_require__) {
var DESCRIPTORS = __webpack_require__("83ab");
var definePropertyModule = __webpack_require__("9bf2");
var anObject = __webpack_require__("825a");
var objectKeys = __webpack_require__("df75");
// `Object.defineProperties` method
// https://tc39.github.io/ecma262/#sec-object.defineproperties
module.exports = DESCRIPTORS ? Object.defineProperties : function defineProperties(O, Properties) {
anObject(O);
var keys = objectKeys(Properties);
var length = keys.length;
var index = 0;
var key;
while (length > index) definePropertyModule.f(O, key = keys[index++], Properties[key]);
return O;
};
/***/ }),
/***/ "3bbe":
/***/ (function(module, exports, __webpack_require__) {
var isObject = __webpack_require__("861d");
module.exports = function (it) {
if (!isObject(it) && it !== null) {
throw TypeError("Can't set " + String(it) + ' as a prototype');
} return it;
};
/***/ }),
/***/ "3f8c":
/***/ (function(module, exports) {
module.exports = {};
/***/ }),
/***/ "428f":
/***/ (function(module, exports, __webpack_require__) {
var global = __webpack_require__("da84");
module.exports = global;
/***/ }),
/***/ "44ad":
/***/ (function(module, exports, __webpack_require__) {
var fails = __webpack_require__("d039");
var classof = __webpack_require__("c6b6");
var split = ''.split;
// fallback for non-array-like ES3 and non-enumerable old V8 strings
module.exports = fails(function () {
// throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
// eslint-disable-next-line no-prototype-builtins
return !Object('z').propertyIsEnumerable(0);
}) ? function (it) {
return classof(it) == 'String' ? split.call(it, '') : Object(it);
} : Object;
/***/ }),
/***/ "44d2":
/***/ (function(module, exports, __webpack_require__) {
var wellKnownSymbol = __webpack_require__("b622");
var create = __webpack_require__("7c73");
var definePropertyModule = __webpack_require__("9bf2");
var UNSCOPABLES = wellKnownSymbol('unscopables');
var ArrayPrototype = Array.prototype;
// Array.prototype[@@unscopables]
// https://tc39.github.io/ecma262/#sec-array.prototype-@@unscopables
if (ArrayPrototype[UNSCOPABLES] == undefined) {
definePropertyModule.f(ArrayPrototype, UNSCOPABLES, {
configurable: true,
value: create(null)
});
}
// add a key to Array.prototype[@@unscopables]
module.exports = function (key) {
ArrayPrototype[UNSCOPABLES][key] = true;
};
/***/ }),
/***/ "4930":
/***/ (function(module, exports, __webpack_require__) {
var fails = __webpack_require__("d039");
module.exports = !!Object.getOwnPropertySymbols && !fails(function () {
// Chrome 38 Symbol has incorrect toString conversion
// eslint-disable-next-line no-undef
return !String(Symbol());
});
/***/ }),
/***/ "4d64":
/***/ (function(module, exports, __webpack_require__) {
var toIndexedObject = __webpack_require__("fc6a");
var toLength = __webpack_require__("50c4");
var toAbsoluteIndex = __webpack_require__("23cb");
// `Array.prototype.{ indexOf, includes }` methods implementation
var createMethod = function (IS_INCLUDES) {
return function ($this, el, fromIndex) {
var O = toIndexedObject($this);
var length = toLength(O.length);
var index = toAbsoluteIndex(fromIndex, length);
var value;
// Array#includes uses SameValueZero equality algorithm
// eslint-disable-next-line no-self-compare
if (IS_INCLUDES && el != el) while (length > index) {
value = O[index++];
// eslint-disable-next-line no-self-compare
if (value != value) return true;
// Array#indexOf ignores holes, Array#includes - not
} else for (;length > index; index++) {
if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;
} return !IS_INCLUDES && -1;
};
};
module.exports = {
// `Array.prototype.includes` method
// https://tc39.github.io/ecma262/#sec-array.prototype.includes
includes: createMethod(true),
// `Array.prototype.indexOf` method
// https://tc39.github.io/ecma262/#sec-array.prototype.indexof
indexOf: createMethod(false)
};
/***/ }),
/***/ "50c4":
/***/ (function(module, exports, __webpack_require__) {
var toInteger = __webpack_require__("a691");
var min = Math.min;
// `ToLength` abstract operation
// https://tc39.github.io/ecma262/#sec-tolength
module.exports = function (argument) {
return argument > 0 ? min(toInteger(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
};
/***/ }),
/***/ "5135":
/***/ (function(module, exports) {
var hasOwnProperty = {}.hasOwnProperty;
module.exports = function (it, key) {
return hasOwnProperty.call(it, key);
};
/***/ }),
/***/ "5692":
/***/ (function(module, exports, __webpack_require__) {
var IS_PURE = __webpack_require__("c430");
var store = __webpack_require__("c6cd");
(module.exports = function (key, value) {
return store[key] || (store[key] = value !== undefined ? value : {});
})('versions', []).push({
version: '3.7.0',
mode: IS_PURE ? 'pure' : 'global',
copyright: '© 2020 Denis Pushkarev (zloirock.ru)'
});
/***/ }),
/***/ "56ef":
/***/ (function(module, exports, __webpack_require__) {
var getBuiltIn = __webpack_require__("d066");
var getOwnPropertyNamesModule = __webpack_require__("241c");
var getOwnPropertySymbolsModule = __webpack_require__("7418");
var anObject = __webpack_require__("825a");
// all object keys, includes non-enumerable and symbols
module.exports = getBuiltIn('Reflect', 'ownKeys') || function ownKeys(it) {
var keys = getOwnPropertyNamesModule.f(anObject(it));
var getOwnPropertySymbols = getOwnPropertySymbolsModule.f;
return getOwnPropertySymbols ? keys.concat(getOwnPropertySymbols(it)) : keys;
};
/***/ }),
/***/ "5c6c":
/***/ (function(module, exports) {
module.exports = function (bitmap, value) {
return {
enumerable: !(bitmap & 1),
configurable: !(bitmap & 2),
writable: !(bitmap & 4),
value: value
};
};
/***/ }),
/***/ "5e69":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom-collections.iterator.js
var web_dom_collections_iterator = __webpack_require__("ddb0");
// CONCATENATED MODULE: ./src/components/helpers/util.js
// Compares 2 arrays
const isEqual = (array, other) => {
if (array.length !== other.length) {
return false;
}
let index = -1;
while (++index < array.length) {
if (array[index] !== other[index]) return false;
}
return true;
}; // Finds the closest value in an array and returns the index
const indexOFClosest = (array, value) => {
return array.reduce((prev, curr) => {
return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev;
});
};
// EXTERNAL MODULE: ./src/components/base-slider.js + 1 modules
var base_slider = __webpack_require__("2d54");
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/RangeSlider.vue?vue&type=script&lang=js&
const CLASS_NAME = 'range-slider slider';
/* harmony default export */ var RangeSlidervue_type_script_lang_js_ = ({
name: "vue-material-range-slider",
extends: base_slider["a" /* default */],
props: {
value: {
type: Array,
default: () => [0, 100]
}
},
data() {
return {
localValue: this.value,
localPercent: [0, 0]
};
},
mounted() {
this.sliderDimensions = this.getSliderDimensions();
this.value.forEach((v, i) => {
this.setActiveThumb(i);
this.setLocalValue(v);
});
this.setActiveThumb(null);
},
computed: {
baseCls() {
return CLASS_NAME;
},
maxThumbIndex() {
return this.localValue.indexOf(Math.max(...this.localValue));
},
minThumbIndex() {
return this.localValue.indexOf(Math.min(...this.localValue));
},
percent() {
return this.localPercent.map(v => this.clamp(v));
},
isMinValue() {
return this.percent.every(v => v === 0);
},
displayValue() {
let value = this.localValue[this.activeThumb];
if (this.displayWith) {
return this.displayWith(value);
} // When incrementing using a decimal value make sure its rounded
if (this.roundToDecimal && value && value % 1 !== 0) {
return value.toFixed(this.roundToDecimal);
}
return value;
}
},
methods: {
emitInputEvent(newValue, oldValue) {
if (!isEqual(newValue, oldValue)) {
this.$emit("input", newValue);
}
},
setLocalValue(v) {
if (v !== this.localValue) {
let value = v; // While incrementing by a decimal we can end up with values like 33.300000000000004.
// Truncate it to ensure that it matches the label and to make it easier to work with.
if (this.roundToDecimal) {
value = parseFloat(value.toFixed(this.roundToDecimal));
} // When using multiple thumbs find the closest
if (this.activeThumb === null) {
this.activeThumb = this.getClosestThumb(this.localValue, v);
}
const oldValue = [...this.localValue];
this.localValue.forEach((currentValue, i) => {
if (i === this.activeThumb) {
this.$set(this.localValue, i, value);
this.$set(this.localPercent, i, this.calculatePercentage(value));
} else {
this.$set(this.localValue, i, Number(currentValue));
this.$set(this.localPercent, i, this.calculatePercentage(Number(currentValue)));
}
});
this.emitInputEvent(this.localValue, oldValue);
}
},
onSlideEnd() {
base_slider["a" /* default */].options.methods.onSlideEnd.call(this); // Reset the thumb
this.setActiveThumb(null);
},
getClosestThumb(array, value) {
const index = indexOFClosest(array, value);
return array.indexOf(index);
},
setActiveThumb(index) {
this.activeThumb = index;
},
increment(numSteps) {
if (this.activeThumb === null) {
return;
}
let value = this.clamp((this.localValue[this.activeThumb] || 0) + this.step * numSteps, this.min, this.max);
this.setLocalValue(value);
},
getTrackDimensions(percents, index) {
const size = this.vertical ? this.sliderDimensions.height : this.sliderDimensions.width;
let percent;
let offset;
if (index === 0) {
// Renders the first section leading from the start of the slider to the first thumb
percent = percents[index];
offset = -this.thumbGap;
} else if (index > 0 && index < percents.length) {
const thumbGap = this.thumbGap * 2;
const thumbGapPercent = -(thumbGap * 100 / size) / 100; // Calculate inbetween the current thumb and the next
percent = percents[index - 1] - percents[index] - thumbGapPercent; // Calculate the amount to trim off either side of the track when there is a thumbGap
offset = size * percents[index] - this.thumbGap;
} else if (index === percents.length) {
// From last to the end
percent = 1 - percents[this.maxThumbIndex];
offset = size * percents[this.maxThumbIndex] + this.thumbGap;
}
return {
percent,
offset
};
},
trackBackgroundStyles(percents, index) {
if (!this.sliderDimensions) {
return;
}
const {
percent,
offset
} = this.getTrackDimensions(percents, index);
const axis = this.vertical ? "Y" : "X";
const sign = this.shouldInvertMouseCoords() ? "-" : "";
const scale = this.vertical ? `1, ${percent}, 1` : `${percent}, 1, 1`;
return {
transform: `translate${axis}(${sign}${offset}px) scale3d(${scale})`
};
},
trackFillStyles(percents) {
if (!this.sliderDimensions) {
return;
}
const axis = this.vertical ? "Y" : "X";
const sign = this.shouldInvertMouseCoords() ? "-" : "";
const size = this.vertical ? this.sliderDimensions.height : this.sliderDimensions.width; // Find the difference between the minimum and maximum thumb
const trim = this.thumbGap * percents.length;
const trimPercent = trim / size * 100; // Calculate inbetween the first thumb and the last thumb
const percent = percents[this.maxThumbIndex] - percents[this.minThumbIndex] - this.calculatePercentage(trimPercent); // offset from the minimum thumb
const offset = size * percents[this.minThumbIndex];
const scale = this.vertical ? `1, ${percent}, 1` : `${percent}, 1, 1`;
return {
transform: `translate${axis}(${sign}${offset + this.thumbGap}px) scale3d(${scale})`
};
},
createChildren() {
const thumbs = this.localValue.map((_, i) => {
const onSlideStart = () => {
if (this.disabled) return;
this.setActiveThumb(i);
};
const onFocus = () => {
if (this.disabled) return;
this.isActive = true;
this.setActiveThumb(i);
};
const onBlur = () => {
this.setActiveThumb(null);
};
const listeners = {
touchstart: onSlideStart,
mousedown: onSlideStart,
focus: onFocus,
blur: onBlur
};
const isActive = this.activeThumb === i;
return this.createThumb(this.localPercent[i], listeners, isActive);
});
return [this.createTrack(), ...thumbs];
},
createTrack() {
const h = this.$createElement;
let background = [];
for (let i = 0; i < this.localValue.length + 1; i++) {
let section = h('div', {
staticClass: 'slider-track-background',
style: this.trackBackgroundStyles(this.percent, i),
key: `'slider-track-background-${i}`
});
background.push(section);
}
return h('div', {
staticClass: 'slider-track-wrapper'
}, [...background, this.createTrackFill(this.percent)]);
},
createTrackFill(percent) {
const h = this.$createElement;
return h("div", {
staticClass: "slider-track-fill",
style: this.trackFillStyles(percent)
});
}
},
render() {
return this.createSlider();
}
});
// CONCATENATED MODULE: ./src/components/RangeSlider.vue?vue&type=script&lang=js&
/* harmony default export */ var components_RangeSlidervue_type_script_lang_js_ = (RangeSlidervue_type_script_lang_js_);
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__("2877");
// CONCATENATED MODULE: ./src/components/RangeSlider.vue
var render, staticRenderFns
function injectStyles (context) {
var style0 = __webpack_require__("c23b")
if (style0.__inject__) style0.__inject__(context)
}
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
components_RangeSlidervue_type_script_lang_js_,
render,
staticRenderFns,
false,
injectStyles,
null,
null
,true
)
/* harmony default export */ var RangeSlider = __webpack_exports__["a"] = (component.exports);
/***/ }),
/***/ "60da":
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var DESCRIPTORS = __webpack_require__("83ab");
var fails = __webpack_require__("d039");
var objectKeys = __webpack_require__("df75");
var getOwnPropertySymbolsModule = __webpack_require__("7418");
var propertyIsEnumerableModule = __webpack_require__("d1e7");
var toObject = __webpack_require__("7b0b");
var IndexedObject = __webpack_require__("44ad");
var nativeAssign = Object.assign;
var defineProperty = Object.defineProperty;
// `Object.assign` method
// https://tc39.github.io/ecma262/#sec-object.assign
module.exports = !nativeAssign || fails(function () {
// should have correct order of operations (Edge bug)
if (DESCRIPTORS && nativeAssign({ b: 1 }, nativeAssign(defineProperty({}, 'a', {
enumerable: true,
get: function () {
defineProperty(this, 'b', {
value: 3,
enumerable: false
});
}
}), { b: 2 })).b !== 1) return true;
// should work with symbols and should have deterministic property order (V8 bug)
var A = {};
var B = {};
// eslint-disable-next-line no-undef
var symbol = Symbol();
var alphabet = 'abcdefghijklmnopqrst';
A[symbol] = 7;
alphabet.split('').forEach(function (chr) { B[chr] = chr; });
return nativeAssign({}, A)[symbol] != 7 || objectKeys(nativeAssign({}, B)).join('') != alphabet;
}) ? function assign(target, source) { // eslint-disable-line no-unused-vars
var T = toObject(target);
var argumentsLength = arguments.length;
var index = 1;
var getOwnPropertySymbols = getOwnPropertySymbolsModule.f;
var propertyIsEnumerable = propertyIsEnumerableModule.f;
while (argumentsLength > index) {
var S = IndexedOb