rangeslider-pure/dist/range-slider.esm.js

Simple, small and fast vanilla JavaScript polyfill for the HTML5 <input type="range"> slider element

//#region \0rolldown/runtime.js
var e = Object.defineProperty, t = (t, n) => {
	let r = {};
	for (var i in t) e(r, i, {
		get: t[i],
		enumerable: !0
	});
	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
}, n = /* @__PURE__ */ t({
	between: () => f,
	debounce: () => a,
	delay: () => i,
	getFirstNumberLike: () => l,
	isArray: () => s,
	isNumberLike: () => c,
	isObject: () => u,
	isString: () => o,
	simpleExtend: () => d,
	uuid: () => r
}), r = () => {
	let e = () => Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
	return e() + e() + "-" + e() + "-" + e() + "-" + e() + "-" + e() + e() + e();
}, i = (e, t, ...n) => setTimeout(() => e.apply(null, n), t), a = (e, t = 100) => (...n) => (e.debouncing ||= (e.lastReturnVal = e.apply(window, n), !0), clearTimeout(e.debounceTimeout), e.debounceTimeout = setTimeout(() => {
	e.debouncing = !1;
}, t), e.lastReturnVal), o = (e) => e === "" + e, s = (e) => Object.prototype.toString.call(e) === "[object Array]", c = (e) => e != null && (o(e) && isFinite(parseFloat(e)) || isFinite(e)), l = (...e) => {
	if (!e.length) return null;
	for (let t = 0, n = e.length; t < n; t++) if (c(e[t])) return e[t];
	return null;
}, u = (e) => Object.prototype.toString.call(e) === "[object Object]", d = (e, t) => {
	let n = {};
	for (let t in e) n[t] = e[t];
	for (let e in t) n[e] = t[e];
	return n;
}, f = (e, t, n) => e < t ? t : e > n ? n : e, p = /* @__PURE__ */ t({
	addClass: () => C,
	addEventListeners: () => O,
	detectIE: () => h,
	forEachAncestors: () => T,
	getDimension: () => b,
	getHiddenParentNodes: () => y,
	hasClass: () => S,
	insertAfter: () => D,
	isHidden: () => v,
	removeAllListenersFromEl: () => A,
	removeClass: () => w,
	removeEventListeners: () => k,
	setCss: () => x,
	supportsRange: () => j,
	triggerEvent: () => E
}), m = "eventListenerList", h = () => {
	let e = window.navigator.userAgent, t = e.indexOf("MSIE ");
	if (t > 0) return parseInt(e.substring(t + 5, e.indexOf(".", t)), 10);
	if (e.indexOf("Trident/") > 0) {
		let t = e.indexOf("rv:");
		return parseInt(e.substring(t + 3, e.indexOf(".", t)), 10);
	}
	let n = e.indexOf("Edge/");
	return n > 0 ? parseInt(e.substring(n + 5, e.indexOf(".", n)), 10) : !1;
}, g = h(), _ = window.PointerEvent && !g ? { passive: !1 } : !1, v = (e) => e.offsetWidth === 0 || e.offsetHeight === 0 || e.open === !1, y = (e) => {
	let t = [], n = e.parentNode;
	for (; n && v(n);) t.push(n), n = n.parentNode;
	return t;
}, b = (e, t) => {
	let n = y(e), r = n.length, i = [], a = e[t], o = (e) => {
		e.open !== void 0 && (e.open = !e.open);
	};
	if (r) {
		for (let e = 0; e < r; e++) i.push({
			display: n[e].style.display,
			height: n[e].style.height,
			overflow: n[e].style.overflow,
			visibility: n[e].style.visibility
		}), n[e].style.display = "block", n[e].style.height = "0", n[e].style.overflow = "hidden", n[e].style.visibility = "hidden", o(n[e]);
		a = e[t];
		for (let e = 0; e < r; e++) o(n[e]), n[e].style.display = i[e].display, n[e].style.height = i[e].height, n[e].style.overflow = i[e].overflow, n[e].style.visibility = i[e].visibility;
	}
	return a;
}, x = (e, t) => {
	for (let n in t) e.style[n] = t[n];
	return e.style;
}, S = (e, t) => RegExp(" " + t + " ").test(" " + e.className + " "), C = (e, t) => {
	S(e, t) || (e.className += " " + t);
}, w = (e, t) => {
	let n = " " + e.className.replace(/[\t\r\n]/g, " ") + " ";
	if (S(e, t)) {
		for (; n.indexOf(" " + t + " ") >= 0;) n = n.replace(" " + t + " ", " ");
		e.className = n.replace(/^\s+|\s+$/g, "");
	}
}, T = (e, t, n) => {
	for (n && t(e); e.parentNode && !t(e);) e = e.parentNode;
	return e;
}, E = (e, t, n) => {
	if (!o(t)) throw TypeError("event name must be String");
	if (!(e instanceof HTMLElement)) throw TypeError("element must be HTMLElement");
	t = t.trim();
	let r = document.createEvent("CustomEvent");
	r.initCustomEvent(t, !1, !1, n), e.dispatchEvent(r);
}, D = (e, t) => e.parentNode.insertBefore(t, e.nextSibling), O = (e, t, n) => {
	t.forEach((t) => {
		e[m] || (e[m] = {}), e[m][t] || (e[m][t] = []), e.addEventListener(t, n, _), e[m][t].indexOf(n) < 0 && e[m][t].push(n);
	});
}, k = (e, t, n) => {
	t.forEach((t) => {
		let r;
		e.removeEventListener(t, n, _), e[m] && e[m][t] && (r = e[m][t].indexOf(n)) > -1 && e[m][t].splice(r, 1);
	});
}, A = (e, t) => {
	if (!t[m]) return;
	function n(t) {
		t === e._startEventListener && this.el.removeEventListener(this.eventName, t, !1);
	}
	for (let e in t[m]) t[m][e].forEach(n, {
		eventName: e,
		el: t
	});
	t[m] = {};
}, j = () => {
	let e = document.createElement("input");
	return e.setAttribute("type", "range"), e.type !== "text";
}, M = /[\n\t]/g, N = 100, P = 300, F = 50, I = "rangeSlider", L = j(), R = {
	polyfill: !0,
	root: document,
	rangeClass: "rangeSlider",
	disabledClass: "rangeSlider--disabled",
	fillClass: "rangeSlider__fill",
	bufferClass: "rangeSlider__buffer",
	handleClass: "rangeSlider__handle",
	startEvent: [
		"mousedown",
		"touchstart",
		"pointerdown"
	],
	moveEvent: [
		"mousemove",
		"touchmove",
		"pointermove"
	],
	endEvent: [
		"mouseup",
		"touchend",
		"pointerup"
	],
	min: null,
	max: null,
	step: null,
	value: null,
	buffer: null,
	stick: null,
	borderRadius: 10,
	vertical: !1
}, z = !1, B = class e {
	constructor(t, n) {
		let i, a, o, u, f;
		if (e.instances.push(this), this.element = t, this.options = d(R, n), this.polyfill = this.options.polyfill, this.vertical = this.options.vertical, this.onInit = this.options.onInit, this.onSlide = this.options.onSlide, this.onSlideStart = this.options.onSlideStart, this.onSlideEnd = this.options.onSlideEnd, this.onSlideEventsCount = -1, this.isInteractsNow = !1, this.needTriggerEvents = !1, this._addVerticalSlideScrollFix(), !this.polyfill && L) return;
		this.options.buffer = this.options.buffer || parseFloat(this.element.getAttribute("data-buffer")), this.identifier = "js-" + I + "-" + r(), this.min = l(this.options.min, parseFloat(this.element.getAttribute("min")), i = 0), this.max = l(this.options.max, parseFloat(this.element.getAttribute("max")), a = N), this.value = l(this.options.value, this.element.value, parseFloat(this.element.value || this.min + (this.max - this.min) / 2)), this.step = l(this.options.step, parseFloat(this.element.getAttribute("step")) || (o = 1)), this.percent = null, s(this.options.stick) && this.options.stick.length >= 1 ? this.stick = this.options.stick : (u = this.element.getAttribute("stick")) && (f = u.split(" "), f.length >= 1 && (this.stick = f.map(parseFloat))), this.stick && this.stick.length === 1 && this.stick.push(this.step * 1.5), this._updatePercentFromValue(), this.toFixed = this._toFixed(this.step);
		let p;
		this.container = document.createElement("div"), C(this.container, this.options.fillClass), p = this.vertical ? this.options.fillClass + "__vertical" : this.options.fillClass + "__horizontal", C(this.container, p), this.handle = document.createElement("div"), C(this.handle, this.options.handleClass), p = this.vertical ? this.options.handleClass + "__vertical" : this.options.handleClass + "__horizontal", C(this.handle, p), this.range = document.createElement("div"), C(this.range, this.options.rangeClass), this.range.id = this.identifier;
		let m = t.getAttribute("title");
		m && m.length > 0 && this.range.setAttribute("title", m), this.options.bufferClass && (this.buffer = document.createElement("div"), C(this.buffer, this.options.bufferClass), this.range.appendChild(this.buffer), p = this.vertical ? this.options.bufferClass + "__vertical" : this.options.bufferClass + "__horizontal", C(this.buffer, p)), this.range.appendChild(this.container), this.range.appendChild(this.handle), p = this.vertical ? this.options.rangeClass + "__vertical" : this.options.rangeClass + "__horizontal", C(this.range, p), c(this.options.value) && (this._setValue(this.options.value, !0), this.element.value = this.options.value), c(this.options.buffer) && this.element.setAttribute("data-buffer", this.options.buffer), (c(this.options.min) || i) && this.element.setAttribute("min", "" + this.min), (c(this.options.max) || a) && this.element.setAttribute("max", "" + this.max), (c(this.options.step) || o) && this.element.setAttribute("step", "" + this.step), D(this.element, this.range), x(this.element, {
			position: "absolute",
			width: "1px",
			height: "1px",
			overflow: "hidden",
			opacity: "0"
		}), this._handleDown = this._handleDown.bind(this), this._handleMove = this._handleMove.bind(this), this._handleEnd = this._handleEnd.bind(this), this._startEventListener = this._startEventListener.bind(this), this._changeEventListener = this._changeEventListener.bind(this), this._handleResize = this._handleResize.bind(this), this._init(), window.addEventListener("resize", this._handleResize, !1), O(this.options.root, this.options.startEvent, this._startEventListener), this.element.addEventListener("change", this._changeEventListener, !1);
	}
	static create(t, n) {
		let r = (t) => {
			let r = t[I];
			r || (r = new e(t, n), t[I] = r);
		};
		t.length ? Array.prototype.slice.call(t).forEach(function(e) {
			r(e);
		}) : r(t);
	}
	static _touchMoveScrollHandler(t) {
		e.slidingVertically && t.preventDefault();
	}
	update(e, t) {
		return t && (this.needTriggerEvents = !0), u(e) && (c(e.min) && (this.element.setAttribute("min", "" + e.min), this.min = e.min), c(e.max) && (this.element.setAttribute("max", "" + e.max), this.max = e.max), c(e.step) && (this.element.setAttribute("step", "" + e.step), this.step = e.step, this.toFixed = this._toFixed(e.step)), c(e.buffer) && this._setBufferPosition(e.buffer), c(e.value) && this._setValue(e.value)), this._update(), this.onSlideEventsCount = 0, this.needTriggerEvents = !1, this;
	}
	destroy() {
		A(this, this.options.root), window.removeEventListener("resize", this._handleResize, !1), this.element.removeEventListener("change", this._changeEventListener, !1), this.element.style.cssText = "", delete this.element[I], this.range && this.range.parentNode.removeChild(this.range), e.instances = e.instances.filter((e) => e !== this), e.instances.some((e) => e.vertical) || this._removeVerticalSlideScrollFix();
	}
	_toFixed(e) {
		return (e + "").replace(".", "").length - 1;
	}
	_init() {
		this.onInit && typeof this.onInit == "function" && this.onInit(), this._update(!1);
	}
	_updatePercentFromValue() {
		this.percent = (this.value - this.min) / (this.max - this.min);
	}
	_startEventListener(e, t) {
		let n = e.target, r = !1;
		e.which !== 1 && !("touches" in e) || (T(n, (e) => r = e.id === this.identifier && !S(e, this.options.disabledClass), !0), r && this._handleDown(e, t));
	}
	_changeEventListener(e, t) {
		if (t && t.origin === this.identifier) return;
		let n = e.target.value, r = this._getPositionFromValue(n);
		this._setPosition(r);
	}
	_update(e) {
		let t = this.vertical ? "offsetHeight" : "offsetWidth";
		this.handleSize = b(this.handle, t), this.rangeSize = b(this.range, t), this.maxHandleX = this.rangeSize - this.handleSize, this.grabX = this.handleSize / 2, this.position = this._getPositionFromValue(this.value), this.element.disabled ? C(this.range, this.options.disabledClass) : w(this.range, this.options.disabledClass), this._setPosition(this.position), this.options.bufferClass && this.options.buffer && this._setBufferPosition(this.options.buffer), this._updatePercentFromValue(), e !== !1 && E(this.element, "change", { origin: this.identifier });
	}
	_addVerticalSlideScrollFix() {
		this.vertical && !z && (document.addEventListener("touchmove", e._touchMoveScrollHandler, { passive: !1 }), z = !0);
	}
	_removeVerticalSlideScrollFix() {
		document.removeEventListener("touchmove", e._touchMoveScrollHandler), z = !1;
	}
	_handleResize() {
		return a(() => {
			i(() => {
				this._update();
			}, P);
		}, F)();
	}
	_handleDown(e) {
		if (this.isInteractsNow = !0, e.preventDefault(), O(this.options.root, this.options.moveEvent, this._handleMove), O(this.options.root, this.options.endEvent, this._handleEnd), (" " + e.target.className + " ").replace(M, " ").indexOf(this.options.handleClass) > -1) return;
		let t = this.range.getBoundingClientRect(), n = this._getRelativePosition(e), r = this.vertical ? t.bottom : t.left, i = this._getPositionFromNode(this.handle) - r, a = n - this.grabX;
		this._setPosition(a), n >= i && n < i + this.options.borderRadius * 2 && (this.grabX = n - i), this._updatePercentFromValue();
	}
	_handleMove(e) {
		let t = this._getRelativePosition(e);
		this.isInteractsNow = !0, e.preventDefault(), this._setPosition(t - this.grabX);
	}
	_handleEnd(t) {
		t.preventDefault(), k(this.options.root, this.options.moveEvent, this._handleMove), k(this.options.root, this.options.endEvent, this._handleEnd), E(this.element, "change", { origin: this.identifier }), (this.isInteractsNow || this.needTriggerEvents) && (this.onSlideEnd && typeof this.onSlideEnd == "function" && this.onSlideEnd(this.value, this.percent, this.position), this.vertical && (e.slidingVertically = !1)), this.onSlideEventsCount = 0, this.isInteractsNow = !1;
	}
	_setPosition(t) {
		let n, r, i, a, o = this._getValueFromPosition(f(t, 0, this.maxHandleX));
		this.stick && (a = this.stick[0], r = this.stick[1] || .1, i = o % a, i < r ? o -= i : Math.abs(a - i) < r && (o = o - i + a)), n = this._getPositionFromValue(o), this.vertical ? (this.container.style.height = n + this.grabX + "px", this.handle.style.webkitTransform = "translateY(-" + n + "px)", this.handle.style.msTransform = "translateY(-" + n + "px)", this.handle.style.transform = "translateY(-" + n + "px)") : (this.container.style.width = n + this.grabX + "px", this.handle.style.webkitTransform = "translateX(" + n + "px)", this.handle.style.msTransform = "translateX(" + n + "px)", this.handle.style.transform = "translateX(" + n + "px)"), this._setValue(o), this.position = n, this.value = o, this._updatePercentFromValue(), (this.isInteractsNow || this.needTriggerEvents) && (this.onSlideStart && typeof this.onSlideStart == "function" && this.onSlideEventsCount === 0 && this.onSlideStart(this.value, this.percent, this.position), this.onSlide && typeof this.onSlide == "function" && this.onSlide(this.value, this.percent, this.position), this.vertical && (e.slidingVertically = !0)), this.onSlideEventsCount++;
	}
	_setBufferPosition(e) {
		let t = !0;
		if (isFinite(e)) e = parseFloat(e);
		else if (o(e)) e.indexOf("px") > 0 && (t = !1), e = parseFloat(e);
		else {
			console.warn("New position must be XXpx or XX%");
			return;
		}
		if (isNaN(e)) {
			console.warn("New position is NaN");
			return;
		}
		if (!this.options.bufferClass) {
			console.warn("You disabled buffer, it's className is empty");
			return;
		}
		let n = t ? e : e / this.rangeSize * 100;
		n < 0 && (n = 0), n > 100 && (n = 100), this.options.buffer = n;
		let r = this.options.borderRadius / this.rangeSize * 100, i = n - r;
		i < 0 && (i = 0), this.vertical ? (this.buffer.style.height = i + "%", this.buffer.style.bottom = r * .5 + "%") : (this.buffer.style.width = i + "%", this.buffer.style.left = r * .5 + "%"), this.element.setAttribute("data-buffer", n);
	}
	_getPositionFromNode(e) {
		let t = 0;
		for (; e !== null;) t += this.vertical ? e.offsetTop : e.offsetLeft, e = e.offsetParent;
		return t;
	}
	_getRelativePosition(e) {
		let t = this.range.getBoundingClientRect(), n = this.vertical ? t.bottom : t.left, r = 0, i = this.vertical ? "pageY" : "pageX";
		return e[i] === void 0 ? e.originalEvent === void 0 ? e.touches && e.touches[0] && e.touches[0][i] !== void 0 ? r = e.touches[0][i] : e.currentPoint && (e.currentPoint.x !== void 0 || e.currentPoint.y !== void 0) && (r = this.vertical ? e.currentPoint.y : e.currentPoint.x) : e.originalEvent[i] === void 0 ? e.originalEvent.touches && e.originalEvent.touches[0] && e.originalEvent.touches[0][i] !== void 0 && (r = e.originalEvent.touches[0][i]) : r = e.originalEvent[i] : r = e.touches && e.touches.length ? e.touches[0][i] : e[i], this.vertical && (r -= window.pageYOffset), this.vertical ? n - r : r - n;
	}
	_getPositionFromValue(e) {
		let t = (e - this.min) / (this.max - this.min) * this.maxHandleX;
		return isNaN(t) ? 0 : t;
	}
	_getValueFromPosition(e) {
		let t = e / (this.maxHandleX || 1), n = this.step * Math.round(t * (this.max - this.min) / this.step) + this.min;
		return Number(n.toFixed(this.toFixed));
	}
	_setValue(e, t) {
		e === this.value && !t || (this.element.value = e, this.value = e, E(this.element, "input", { origin: this.identifier }));
	}
};
B.version = "0.5.0", B.dom = p, B.functions = n, B.instances = [], B.slidingVertically = !1;
//#endregion
export { B as default };

//# sourceMappingURL=range-slider.esm.js.map