next-range-slider
Version:
A React component for range slider, for React >=19
83 lines • 6.41 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const presets = {
default: {
'--thc': '#333',
'--thfc': '#444',
'--tcol': '#ccc',
'--rcol': '#555',
'--rb': 'none',
'--thw': '2rem',
'--thh': '2rem',
'--tht': 'translateY(-25%)',
'--thbr': '1rem',
'--thb': 'none',
'--tt': 'none',
'--tw': '100%',
'--th': '1rem',
'--tm': '1rem auto',
'--tp': '0',
'--tb': 'none',
'--tbr': '1rem'
}
};
function updateInputValues(e) {
var _a;
let _t = e.target;
(_a = _t.parentElement) === null || _a === void 0 ? void 0 : _a.style.setProperty(`--${_t.id}`, _t.value);
}
function minMaxTags(min, max, lValue, rValue) {
return {
'--a': lValue,
'--b': rValue,
'--min': min,
'--max': max
};
}
function getTheme(theme, overrides) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
if (!Object.keys(presets).includes(theme))
theme = 'default';
return {
'--thc': (_b = (_a = overrides === null || overrides === void 0 ? void 0 : overrides.thumb) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : presets[theme]['--thc'],
'--thfc': (_d = (_c = overrides === null || overrides === void 0 ? void 0 : overrides.thumb) === null || _c === void 0 ? void 0 : _c.focusBackground) !== null && _d !== void 0 ? _d : presets[theme]['--thfc'],
'--tcol': (_f = (_e = overrides === null || overrides === void 0 ? void 0 : overrides.track) === null || _e === void 0 ? void 0 : _e.background) !== null && _f !== void 0 ? _f : presets[theme]['--tcol'],
'--rcol': (_h = (_g = overrides === null || overrides === void 0 ? void 0 : overrides.range) === null || _g === void 0 ? void 0 : _g.background) !== null && _h !== void 0 ? _h : presets[theme]['--rcol'],
'--rb': (_k = (_j = overrides === null || overrides === void 0 ? void 0 : overrides.range) === null || _j === void 0 ? void 0 : _j.border) !== null && _k !== void 0 ? _k : presets[theme]['--rb'],
'--thw': (_m = (_l = overrides === null || overrides === void 0 ? void 0 : overrides.thumb) === null || _l === void 0 ? void 0 : _l.width) !== null && _m !== void 0 ? _m : presets[theme]['--thw'],
'--thh': (_p = (_o = overrides === null || overrides === void 0 ? void 0 : overrides.thumb) === null || _o === void 0 ? void 0 : _o.height) !== null && _p !== void 0 ? _p : presets[theme]['--thh'],
'--tht': (_r = (_q = overrides === null || overrides === void 0 ? void 0 : overrides.thumb) === null || _q === void 0 ? void 0 : _q.transform) !== null && _r !== void 0 ? _r : presets[theme]['--tht'],
'--thbr': (_u = (_s = overrides === null || overrides === void 0 ? void 0 : overrides.thumb) === null || _s === void 0 ? void 0 : _s.borderRadius) !== null && _u !== void 0 ? _u : presets[theme]['--thbr'],
'--thb': (_w = (_v = overrides === null || overrides === void 0 ? void 0 : overrides.thumb) === null || _v === void 0 ? void 0 : _v.border) !== null && _w !== void 0 ? _w : presets[theme]['--thb'],
'--tt': (_y = (_x = overrides === null || overrides === void 0 ? void 0 : overrides.track) === null || _x === void 0 ? void 0 : _x.transform) !== null && _y !== void 0 ? _y : presets[theme]['--tt'],
'--tw': (_0 = (_z = overrides === null || overrides === void 0 ? void 0 : overrides.track) === null || _z === void 0 ? void 0 : _z.width) !== null && _0 !== void 0 ? _0 : presets[theme]['--tw'],
'--th': (_2 = (_1 = overrides === null || overrides === void 0 ? void 0 : overrides.track) === null || _1 === void 0 ? void 0 : _1.height) !== null && _2 !== void 0 ? _2 : presets[theme]['--th'],
'--tm': (_4 = (_3 = overrides === null || overrides === void 0 ? void 0 : overrides.track) === null || _3 === void 0 ? void 0 : _3.margin) !== null && _4 !== void 0 ? _4 : presets[theme]['--tm'],
'--tp': (_6 = (_5 = overrides === null || overrides === void 0 ? void 0 : overrides.track) === null || _5 === void 0 ? void 0 : _5.padding) !== null && _6 !== void 0 ? _6 : presets[theme]['--tp'],
'--tb': (_8 = (_7 = overrides === null || overrides === void 0 ? void 0 : overrides.track) === null || _7 === void 0 ? void 0 : _7.border) !== null && _8 !== void 0 ? _8 : presets[theme]['--tb'],
'--tbr': (_10 = (_9 = overrides === null || overrides === void 0 ? void 0 : overrides.track) === null || _9 === void 0 ? void 0 : _9.borderRadius) !== null && _10 !== void 0 ? _10 : presets[theme]['--tbr']
};
}
export function RangeSlider(props) {
var _a, _b;
let { style, min, max, step, options } = props, wrapperProps = __rest(props, ["style", "min", "max", "step", "options"]);
let { theme = 'default', leftInputProps, rightInputProps } = Object.assign({}, options);
/** SANITY CHECKS */
if (min > max)
throw new Error('next-range-slider: min must be less than max in component props.');
/** OVERRIDE PROPS */
let _leftInputProps = Object.assign({}, leftInputProps), _rightInputProps = Object.assign({}, rightInputProps);
let _style = Object.assign(Object.assign(Object.assign({}, style), getTheme(theme, options)), minMaxTags(min, max, Number((_a = _leftInputProps.value) !== null && _a !== void 0 ? _a : 0), Number((_b = _rightInputProps.value) !== null && _b !== void 0 ? _b : 0)));
return (_jsxs("div", Object.assign({ className: "wrap", role: "group", style: _style }, wrapperProps, { children: [_jsx("input", Object.assign({ id: "a", type: "range", onInput: updateInputValues, max, min, step }, _leftInputProps)), _jsx("input", Object.assign({ id: "b", type: "range", onInput: updateInputValues, max, min, step }, _rightInputProps))] })));
}
//# sourceMappingURL=RangeSlider.js.map