atomicuilibrary 0.0.1

package/dist/collection/components/range-slider/range-slider.js

@@ -0,0 +1,1369 @@
+import { h, Host } from "@stencil/core";
+export class RangeSlider {
+    el;
+    trackElement;
+    isDragging = false;
+    activeThumb = null;
+    internals;
+    /**
+     * Minimum value
+     */
+    min = 0;
+    /**
+     * Maximum value
+     */
+    max = 100;
+    /**
+     * Step increment
+     */
+    step = 1;
+    /**
+     * Current value (single slider)
+     */
+    value = 50;
+    /**
+     * Range mode - start value
+     */
+    startValue = 25;
+    /**
+     * Range mode - end value
+     */
+    endValue = 75;
+    /**
+     * Enable range mode (two thumbs)
+     */
+    range = false;
+    /**
+     * Minimum distance between thumbs in range mode
+     */
+    minRange = 0;
+    /**
+     * Disabled state
+     */
+    disabled = false;
+    /**
+     * Show value tooltip
+     */
+    showTooltip = true;
+    /**
+     * Tooltip always visible
+     */
+    tooltipAlwaysVisible = false;
+    /**
+     * Color of the slider (string, {from: string, to: string}, or array of ranges [{min: number, max: number, color: string}])
+     */
+    color = '#3bf673';
+    /**
+     * Track color
+     */
+    trackColor = '#e5e7eb';
+    /**
+     * Size variant
+     */
+    size = 'md';
+    /**
+     * Start icon/text
+     */
+    startIcon = '';
+    /**
+     * End icon/text
+     */
+    endIcon = '';
+    /**
+     * Display format function or string
+     */
+    displayFormat = '';
+    /**
+     * Show marks
+     */
+    showMarks = false;
+    /**
+     * Custom marks
+     */
+    marks = [];
+    /**
+     * Restricted values (only allow specific values)
+     */
+    restrictedValues = [];
+    /**
+     * Vertical orientation
+     */
+    vertical = false;
+    /**
+     * Label displayed above the slider
+     */
+    label = '';
+    /**
+     * Semantic color variant or aesthetic variant
+     */
+    variant = '';
+    /**
+     * Prefix string displayed before the value (e.g. '$')
+     */
+    prefixText = '';
+    /**
+     * Suffix string displayed after the value (e.g. '%', 'px')
+     */
+    suffixText = '';
+    /**
+     * Show min and max labels at the ends of the track
+     */
+    showMinMax = false;
+    /**
+     * Show an editable number input synced to the slider value
+     */
+    inputSync = false;
+    /**
+     * Use a gradient fill for the range track
+     */
+    gradientTrack = false;
+    /**
+     * Show current value label
+     */
+    showValue = true;
+    /**
+     * Custom step marks (non-linear scaling)
+     */
+    customSteps = [];
+    /**
+     * RTL support
+     */
+    rtl = false;
+    /**
+     * Circle variant (aesthetic)
+     */
+    circle = false;
+    /**
+     * Hide the colored range track portion
+     */
+    hideRange = false;
+    /**
+     * Hover state for tooltip
+     */
+    isHovering = false;
+    /**
+     * Dragging state
+     */
+    isDraggingState = false;
+    get resolvedColor() {
+        const variantColors = {
+            primary: '#3bf673',
+            success: '#10b981',
+            danger: '#ef4444',
+            warning: '#f59e0b',
+            info: '#06b6d4',
+            purple: '#8b5cf6',
+        };
+        if (Array.isArray(this.color)) {
+            const val = this.range ? this.endValue : this.value;
+            const rangeRule = this.color.find(r => val >= r.min && val <= r.max);
+            return rangeRule ? rangeRule.color : '#3bf673';
+        }
+        const baseColor = typeof this.color === 'string' ? this.color : this.color.from;
+        return this.variant ? variantColors[this.variant] || baseColor : baseColor;
+    }
+    get resolvedGradient() {
+        const variantGradients = {
+            primary: 'linear-gradient(90deg, #3bf673, #6366f1)',
+            success: 'linear-gradient(90deg, #10b981, #34d399)',
+            danger: 'linear-gradient(90deg, #ef4444, #f97316)',
+            warning: 'linear-gradient(90deg, #f59e0b, #fbbf24)',
+            info: 'linear-gradient(90deg, #06b6d4, #3bf673)',
+            purple: 'linear-gradient(90deg, #8b5cf6, #ec4899)',
+        };
+        if (Array.isArray(this.color)) {
+            const val = this.range ? this.endValue : this.value;
+            const rangeRule = this.color.find(r => val >= r.min && val <= r.max);
+            const c = rangeRule ? rangeRule.color : '#3bf673';
+            return `linear-gradient(90deg, ${c}, ${c}aa)`;
+        }
+        const baseColor = typeof this.color === 'string' ? this.color : this.color.from;
+        if (this.variant)
+            return variantGradients[this.variant] || `linear-gradient(90deg, ${baseColor}, ${baseColor})`;
+        if (typeof this.color === 'object' && this.color !== null && !Array.isArray(this.color)) {
+            return `linear-gradient(90deg, ${this.color.from}, ${this.color.to})`;
+        }
+        return `linear-gradient(90deg, ${this.color}, ${this.color}aa)`;
+    }
+    /**
+     * Emitted when value changes
+     */
+    sliderChange;
+    /**
+     * Emitted on drag start
+     */
+    sliderDragStart;
+    /**
+     * Emitted on drag end
+     */
+    sliderDragEnd;
+    handleColorChange() {
+        this.normalizeProps();
+    }
+    handleMarksChange() {
+        this.normalizeProps();
+    }
+    componentWillLoad() {
+        if (typeof this.el.attachInternals === 'function') {
+            this.internals = this.el.attachInternals();
+        }
+        this.normalizeProps();
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        if (this.internals) {
+            if (this.range) {
+                this.internals.setFormValue(`${this.startValue},${this.endValue}`);
+            }
+            else {
+                this.internals.setFormValue(this.value.toString());
+            }
+        }
+    }
+    normalizeProps() {
+        try {
+            if (typeof this.color === 'string' && (this.color.startsWith('{') || this.color.startsWith('['))) {
+                this.color = JSON.parse(this.color);
+            }
+            if (typeof this.marks === 'string') {
+                this.marks = JSON.parse(this.marks);
+            }
+            if (typeof this.restrictedValues === 'string') {
+                this.restrictedValues = JSON.parse(this.restrictedValues);
+            }
+            if (typeof this.customSteps === 'string') {
+                this.customSteps = JSON.parse(this.customSteps);
+            }
+        }
+        catch (e) {
+            console.warn('Failed to parse complex slider prop', e);
+        }
+    }
+    componentDidLoad() {
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+        document.addEventListener('touchmove', this.handleTouchMove);
+        document.addEventListener('touchend', this.handleTouchEnd);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+        document.removeEventListener('touchmove', this.handleTouchMove);
+        document.removeEventListener('touchend', this.handleTouchEnd);
+    }
+    getMarks() {
+        if (typeof this.marks === 'string') {
+            try {
+                return JSON.parse(this.marks);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.marks;
+    }
+    getRestrictedValues() {
+        if (typeof this.restrictedValues === 'string') {
+            try {
+                return JSON.parse(this.restrictedValues);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.restrictedValues;
+    }
+    getCustomSteps() {
+        if (typeof this.customSteps === 'string') {
+            try {
+                return JSON.parse(this.customSteps);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.customSteps;
+    }
+    getNearestValue(value) {
+        const restricted = this.getRestrictedValues();
+        if (restricted.length > 0) {
+            // Find nearest restricted value
+            return restricted.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
+        }
+        const customSteps = this.getCustomSteps();
+        if (customSteps.length > 0) {
+            // Find nearest custom step
+            return customSteps.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
+        }
+        // Regular step
+        const steps = Math.round((value - this.min) / this.step);
+        const val = this.min + steps * this.step;
+        return Math.min(this.max, Math.max(this.min, val));
+    }
+    isRtl() {
+        return this.rtl || document.dir === 'rtl' || (this.el && this.el.getAttribute('dir') === 'rtl');
+    }
+    getPositionFromValue(value) {
+        const customSteps = this.getCustomSteps();
+        if (customSteps.length > 0) {
+            // Non-linear scaling based on custom steps
+            const sortedSteps = [...customSteps].sort((a, b) => a - b);
+            const index = sortedSteps.indexOf(value);
+            if (index !== -1) {
+                return (index / (sortedSteps.length - 1)) * 100;
+            }
+            // If value not in steps, find position between steps
+            for (let i = 0; i < sortedSteps.length - 1; i++) {
+                if (value >= sortedSteps[i] && value <= sortedSteps[i + 1]) {
+                    const ratio = (value - sortedSteps[i]) / (sortedSteps[i + 1] - sortedSteps[i]);
+                    const segmentStart = (i / (sortedSteps.length - 1)) * 100;
+                    const segmentEnd = ((i + 1) / (sortedSteps.length - 1)) * 100;
+                    return segmentStart + ratio * (segmentEnd - segmentStart);
+                }
+            }
+        }
+        // Linear scaling
+        return ((value - this.min) / (this.max - this.min)) * 100;
+    }
+    getValueFromPosition(position) {
+        const customSteps = this.getCustomSteps();
+        if (customSteps.length > 0) {
+            // Non-linear scaling
+            const sortedSteps = [...customSteps].sort((a, b) => a - b);
+            const index = Math.round((position / 100) * (sortedSteps.length - 1));
+            return sortedSteps[Math.max(0, Math.min(index, sortedSteps.length - 1))];
+        }
+        // Linear scaling
+        const rawValue = this.min + (position / 100) * (this.max - this.min);
+        return this.getNearestValue(rawValue);
+    }
+    handleTrackClick = (event) => {
+        if (this.disabled)
+            return;
+        const rect = this.trackElement.getBoundingClientRect();
+        let position;
+        if (this.vertical) {
+            position = ((rect.bottom - event.clientY) / rect.height) * 100;
+        }
+        else {
+            const horizontalPos = ((event.clientX - rect.left) / rect.width) * 100;
+            position = this.isRtl() ? 100 - horizontalPos : horizontalPos;
+        }
+        const newValue = this.getValueFromPosition(Math.max(0, Math.min(100, position)));
+        if (this.range) {
+            const startPos = this.getPositionFromValue(this.startValue);
+            const endPos = this.getPositionFromValue(this.endValue);
+            const clickPos = position;
+            // Determine which thumb to move
+            const distToStart = Math.abs(clickPos - startPos);
+            const distToEnd = Math.abs(clickPos - endPos);
+            if (distToStart < distToEnd) {
+                this.startValue = Math.min(newValue, this.endValue - this.minRange);
+            }
+            else {
+                this.endValue = Math.max(newValue, this.startValue + this.minRange);
+            }
+            this.sliderChange.emit({ start: this.startValue, end: this.endValue });
+            this.updateFormValue();
+        }
+        else {
+            this.value = newValue;
+            this.sliderChange.emit(this.value);
+            this.updateFormValue();
+        }
+    };
+    handleThumbMouseDown = (thumb) => (event) => {
+        if (this.disabled)
+            return;
+        event.preventDefault();
+        this.isDragging = true;
+        this.isDraggingState = true;
+        this.activeThumb = thumb;
+        this.sliderDragStart.emit();
+    };
+    handleThumbTouchStart = (thumb) => (event) => {
+        if (this.disabled)
+            return;
+        event.preventDefault();
+        this.isDragging = true;
+        this.isDraggingState = true;
+        this.activeThumb = thumb;
+        this.sliderDragStart.emit();
+    };
+    handleMouseMove = (event) => {
+        if (!this.isDragging || this.disabled)
+            return;
+        this.updateValueFromEvent(event.clientX, event.clientY);
+    };
+    handleTouchMove = (event) => {
+        if (!this.isDragging || this.disabled)
+            return;
+        const touch = event.touches[0];
+        this.updateValueFromEvent(touch.clientX, touch.clientY);
+    };
+    updateValueFromEvent(clientX, clientY) {
+        if (!this.trackElement)
+            return;
+        const rect = this.trackElement.getBoundingClientRect();
+        let position;
+        if (this.vertical) {
+            position = ((rect.bottom - clientY) / rect.height) * 100;
+        }
+        else {
+            const horizontalPos = ((clientX - rect.left) / rect.width) * 100;
+            position = this.isRtl() ? 100 - horizontalPos : horizontalPos;
+        }
+        const newValue = this.getValueFromPosition(Math.max(0, Math.min(100, position)));
+        if (this.range) {
+            if (this.activeThumb === 'start') {
+                this.startValue = Math.min(newValue, this.endValue - this.minRange);
+            }
+            else if (this.activeThumb === 'end') {
+                this.endValue = Math.max(newValue, this.startValue + this.minRange);
+            }
+            this.sliderChange.emit({ start: this.startValue, end: this.endValue });
+        }
+        else {
+            this.value = newValue;
+            this.sliderChange.emit(this.value);
+        }
+        this.updateFormValue();
+    }
+    handleMouseUp = () => {
+        if (this.isDragging) {
+            this.isDragging = false;
+            this.isDraggingState = false;
+            this.activeThumb = null;
+            this.sliderDragEnd.emit();
+        }
+    };
+    handleTouchEnd = () => {
+        if (this.isDragging) {
+            this.isDragging = false;
+            this.isDraggingState = false;
+            this.activeThumb = null;
+            this.sliderDragEnd.emit();
+        }
+    };
+    formatValue(value) {
+        let formatted;
+        if (this.displayFormat) {
+            try {
+                formatted = this.displayFormat.replace('{value}', value.toString());
+            }
+            catch {
+                formatted = value.toString();
+            }
+        }
+        else {
+            formatted = value.toString();
+        }
+        return `${this.prefixText}${formatted}${this.suffixText}`;
+    }
+    handleInputChange = (thumb) => (event) => {
+        const newValue = Math.max(this.min, Math.min(this.max, Number(event.detail)));
+        if (!isNaN(newValue)) {
+            if (thumb === 'start') {
+                this.startValue = Math.min(newValue, this.endValue);
+                this.sliderChange.emit({ start: this.startValue, end: this.endValue });
+            }
+            else if (thumb === 'end') {
+                this.endValue = Math.max(newValue, this.startValue);
+                this.sliderChange.emit({ start: this.startValue, end: this.endValue });
+            }
+            else {
+                this.value = newValue;
+                this.sliderChange.emit(this.value);
+            }
+        }
+    };
+    handleKeyDown = (thumb) => (event) => {
+        if (this.disabled)
+            return;
+        let newValue = thumb === 'start' ? this.startValue : (this.range ? this.endValue : this.value);
+        const step = this.step;
+        const lgStep = this.step * 10;
+        let changed = false;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                newValue = newValue + step;
+                changed = true;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                newValue = newValue - step;
+                changed = true;
+                break;
+            case 'PageUp':
+                newValue = newValue + lgStep;
+                changed = true;
+                break;
+            case 'PageDown':
+                newValue = newValue - lgStep;
+                changed = true;
+                break;
+            case 'Home':
+                newValue = this.min;
+                changed = true;
+                break;
+            case 'End':
+                newValue = this.max;
+                changed = true;
+                break;
+            default:
+                return;
+        }
+        if (changed) {
+            event.preventDefault();
+            event.stopPropagation();
+            // Clamp and ensure min/max
+            newValue = Math.max(this.min, Math.min(this.max, newValue));
+            if (this.range) {
+                if (thumb === 'start') {
+                    this.startValue = Math.min(newValue, this.endValue);
+                }
+                else {
+                    this.endValue = Math.max(newValue, this.startValue);
+                }
+                this.sliderChange.emit({ start: this.startValue, end: this.endValue });
+            }
+            else {
+                this.value = newValue;
+                this.sliderChange.emit(this.value);
+            }
+        }
+    };
+    renderMarks() {
+        const marks = this.getMarks();
+        const customSteps = this.getCustomSteps();
+        const activeColor = this.resolvedColor;
+        let marksToRender = marks;
+        if (marksToRender.length === 0 && this.showMarks) {
+            const steps = customSteps.length > 0 ? customSteps : [];
+            if (steps.length === 0) {
+                for (let i = this.min; i <= this.max; i += this.step) {
+                    steps.push(i);
+                }
+            }
+            marksToRender = steps.map(val => ({ value: val }));
+        }
+        const startActive = this.range ? this.startValue : this.min;
+        const endActive = this.range ? this.endValue : this.value;
+        return marksToRender.map(mark => {
+            const position = this.getPositionFromValue(mark.value);
+            const isActive = mark.value >= startActive && mark.value <= endActive;
+            const style = this.vertical
+                ? { bottom: `${position}%` }
+                : { left: `${position}%` };
+            return (h("div", { class: "slider-mark", style: style }, h("div", { class: "slider-mark-dot", style: isActive ? { backgroundColor: activeColor, borderColor: 'white' } : {} }), mark.label && h("div", { class: "slider-mark-label" }, mark.label)));
+        });
+    }
+    render() {
+        const startPos = this.range ? this.getPositionFromValue(this.startValue) : 0;
+        const endPos = this.range ? this.getPositionFromValue(this.endValue) : this.getPositionFromValue(this.value);
+        const activeColor = this.resolvedColor;
+        const rangeStyle = this.vertical
+            ? {
+                bottom: `${startPos}%`,
+                height: `${endPos - startPos}%`,
+                ...(this.gradientTrack
+                    ? { background: this.resolvedGradient }
+                    : { backgroundColor: activeColor }),
+            }
+            : {
+                left: `${startPos}%`,
+                width: `${endPos - startPos}%`,
+                ...(this.gradientTrack
+                    ? { background: this.resolvedGradient }
+                    : { backgroundColor: activeColor }),
+            };
+        const thumbStyle = (pos, isVertical) => {
+            const isColorObject = typeof this.color === 'object' && this.color !== null;
+            const baseStyle = isVertical
+                ? { bottom: `${pos}%` }
+                : { [this.isRtl() ? 'right' : 'left']: `${pos}%` };
+            if (isColorObject || (this.gradientTrack && this.variant)) {
+                baseStyle.background = this.resolvedGradient;
+            }
+            else {
+                baseStyle.backgroundColor = activeColor;
+            }
+            baseStyle.boxShadow = `0 0 0 3px ${activeColor}33`;
+            return baseStyle;
+        };
+        return (h(Host, { dir: this.isRtl() ? 'rtl' : 'ltr' }, this.label && (h("div", { class: "slider-label" }, this.label)), h("div", { class: {
+                'slider-container': true,
+                [`slider-${this.size}`]: true,
+                [`variant-${this.variant}`]: !!this.variant,
+                'variant-circle': this.circle,
+                'slider-vertical': this.vertical,
+                'slider-disabled': this.disabled,
+                'slider-dragging': this.isDraggingState,
+                'slider-rtl': this.isRtl(),
+            }, dir: this.isRtl() ? 'rtl' : 'ltr', onMouseEnter: () => (this.isHovering = true), onMouseLeave: () => (this.isHovering = false) }, this.startIcon && (h("div", { class: "slider-icon slider-start-icon" }, this.startIcon)), h("div", { class: "slider-wrapper" }, this.showMinMax && (h("div", { class: "slider-minmax-labels" }, h("span", { class: "slider-minmax-min" }, this.formatValue(this.min)), h("span", { class: "slider-minmax-max" }, this.formatValue(this.max)))), h("div", { class: "slider-track", ref: el => (this.trackElement = el), onClick: this.handleTrackClick, style: { background: this.trackColor } }, !this.hideRange && h("div", { class: "slider-range", style: rangeStyle }), this.showMarks && h("div", { class: "slider-marks" }, this.renderMarks()), this.range && (h("div", { class: {
+                'slider-thumb': true,
+                'slider-thumb-active': this.activeThumb === 'start',
+            }, style: thumbStyle(startPos, this.vertical), onMouseDown: this.handleThumbMouseDown('start'), onTouchStart: this.handleThumbTouchStart('start'), onKeyDown: this.handleKeyDown('start'), tabIndex: this.disabled ? -1 : 0, role: "slider", "aria-label": "Start Value", "aria-valuemin": this.min, "aria-valuemax": this.endValue, "aria-valuenow": this.startValue }, (this.showTooltip && (this.tooltipAlwaysVisible || this.isHovering || this.isDraggingState)) && (h("div", { class: "slider-tooltip" }, this.formatValue(this.startValue))))), h("div", { class: {
+                'slider-thumb': true,
+                'slider-thumb-active': !this.range || this.activeThumb === 'end',
+            }, style: thumbStyle(endPos, this.vertical), onMouseDown: this.handleThumbMouseDown(this.range ? 'end' : null), onTouchStart: this.handleThumbTouchStart(this.range ? 'end' : null), onKeyDown: this.handleKeyDown('end'), tabIndex: this.disabled ? -1 : 0, role: "slider", "aria-label": this.range ? 'End Value' : 'Value', "aria-valuemin": this.range ? this.startValue : this.min, "aria-valuemax": this.max, "aria-valuenow": this.range ? this.endValue : this.value }, (this.showTooltip && (this.tooltipAlwaysVisible || this.isHovering || this.isDraggingState)) && (h("div", { class: "slider-tooltip" }, this.formatValue(this.range ? this.endValue : this.value))))), this.showValue && (h("div", { class: "slider-value-display" }, this.range
+            ? `${this.formatValue(this.startValue)} – ${this.formatValue(this.endValue)}`
+            : this.formatValue(this.value))), this.inputSync && !this.range && (h("ui-input", { type: "number", class: "slider-input", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInputChange: this.handleInputChange('single'), size: "sm" })), this.inputSync && this.range && (h("div", { class: "slider-input-row" }, h("ui-input", { type: "number", class: "slider-input", min: this.min, max: this.endValue, step: this.step, value: this.startValue, disabled: this.disabled, onInputChange: this.handleInputChange('start'), size: "sm" }), h("span", { class: "slider-input-sep" }, "\u2013"), h("ui-input", { type: "number", class: "slider-input", min: this.startValue, max: this.max, step: this.step, value: this.endValue, disabled: this.disabled, onInputChange: this.handleInputChange('end'), size: "sm" })))), this.endIcon && (h("div", { class: "slider-icon slider-end-icon" }, this.endIcon)))));
+    }
+    static get is() { return "ui-range-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["range-slider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["range-slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step increment"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value (single slider)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "50"
+            },
+            "startValue": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Range mode - start value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-value",
+                "defaultValue": "25"
+            },
+            "endValue": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Range mode - end value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "end-value",
+                "defaultValue": "75"
+            },
+            "range": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable range mode (two thumbs)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "range",
+                "defaultValue": "false"
+            },
+            "minRange": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum distance between thumbs in range mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-range",
+                "defaultValue": "0"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "showTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show value tooltip"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-tooltip",
+                "defaultValue": "true"
+            },
+            "tooltipAlwaysVisible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip always visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-always-visible",
+                "defaultValue": "false"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | { from: string; to: string } | { min: number; max: number; color: string }[]",
+                    "resolved": "string | { from: string; to: string; } | { min: number; max: number; color: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the slider (string, {from: string, to: string}, or array of ranges [{min: number, max: number, color: string}])"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'#3bf673'"
+            },
+            "trackColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Track color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "track-color",
+                "defaultValue": "'#e5e7eb'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BasicSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+                    "references": {
+                        "BasicSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::BasicSize",
+                            "referenceLocation": "BasicSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "startIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Start icon/text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-icon",
+                "defaultValue": "''"
+            },
+            "endIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "End icon/text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "end-icon",
+                "defaultValue": "''"
+            },
+            "displayFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display format function or string"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-format",
+                "defaultValue": "''"
+            },
+            "showMarks": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show marks"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-marks",
+                "defaultValue": "false"
+            },
+            "marks": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SliderMark[] | string",
+                    "resolved": "SliderMark[] | string",
+                    "references": {
+                        "SliderMark": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/range-slider/types.ts::SliderMark",
+                            "referenceLocation": "SliderMark"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom marks"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "marks",
+                "defaultValue": "[]"
+            },
+            "restrictedValues": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[] | string",
+                    "resolved": "number[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Restricted values (only allow specific values)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "restricted-values",
+                "defaultValue": "[]"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical orientation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label displayed above the slider"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'success' | 'danger' | 'warning' | 'info' | 'purple' | 'glass' | 'detailed' | ''",
+                    "resolved": "\"\" | \"danger\" | \"detailed\" | \"glass\" | \"info\" | \"primary\" | \"purple\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic color variant or aesthetic variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "''"
+            },
+            "prefixText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix string displayed before the value (e.g. '$')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prefix-text",
+                "defaultValue": "''"
+            },
+            "suffixText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Suffix string displayed after the value (e.g. '%', 'px')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suffix-text",
+                "defaultValue": "''"
+            },
+            "showMinMax": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show min and max labels at the ends of the track"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-min-max",
+                "defaultValue": "false"
+            },
+            "inputSync": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show an editable number input synced to the slider value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-sync",
+                "defaultValue": "false"
+            },
+            "gradientTrack": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use a gradient fill for the range track"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gradient-track",
+                "defaultValue": "false"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show current value label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "true"
+            },
+            "customSteps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[] | string",
+                    "resolved": "number[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom step marks (non-linear scaling)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-steps",
+                "defaultValue": "[]"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "RTL support"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            },
+            "circle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Circle variant (aesthetic)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "circle",
+                "defaultValue": "false"
+            },
+            "hideRange": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the colored range track portion"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-range",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHovering": {},
+            "isDraggingState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sliderChange",
+                "name": "sliderChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when value changes"
+                },
+                "complexType": {
+                    "original": "number | { start: number; end: number }",
+                    "resolved": "number | { start: number; end: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "sliderDragStart",
+                "name": "sliderDragStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on drag start"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "sliderDragEnd",
+                "name": "sliderDragEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on drag end"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "color",
+                "methodName": "handleColorChange"
+            }, {
+                "propName": "marks",
+                "methodName": "handleMarksChange"
+            }];
+    }
+}