mithril-materialized 2.0.0-beta.12 → 2.0.0-beta.14

package/dist/index.esm.js

@@ -2190,6 +2190,12 @@ const InputField = (type, defaultClass = '') => () => {
         isValid: true,
         active: false,
         inputElement: null,
+        // Range-specific state
+        rangeMinValue: undefined,
+        rangeMaxValue: undefined,
+        singleValue: undefined,
+        isDragging: false,
+        activeThumb: null,
     };
     // let labelManager: { updateLabelState: () => void; cleanup: () => void } | null = null;
     // let lengthUpdateHandler: (() => void) | null = null;
@@ -2215,6 +2221,397 @@ const InputField = (type, defaultClass = '') => () => {
             state.hasInteracted = length > 0;
         }
     };
+    // Range slider helper functions
+    const getPercentage = (value, min, max) => {
+        return ((value - min) / (max - min)) * 100;
+    };
+    const updateRangeValues = (minValue, maxValue, attrs, immediate = false) => {
+        // Ensure min doesn't exceed max and vice versa
+        if (minValue > maxValue)
+            minValue = maxValue;
+        if (maxValue < minValue)
+            maxValue = minValue;
+        state.rangeMinValue = minValue;
+        state.rangeMaxValue = maxValue;
+        // Call oninput for immediate feedback or onchange for final changes
+        if (immediate && attrs.oninput) {
+            attrs.oninput(minValue, maxValue);
+        }
+        else if (!immediate && attrs.onchange) {
+            attrs.onchange(minValue, maxValue);
+        }
+    };
+    // Render function for single range slider with tooltip
+    const renderSingleRangeWithTooltip = (attrs, state, cn, style, iconName, id, label, isMandatory, helperText) => {
+        const { min = 0, max = 100, step = 1, initialValue, vertical = false, showValue = false, height = '200px', disabled = false, oninput, onchange, } = attrs;
+        // Initialize single range value
+        const currentValue = initialValue !== undefined ? initialValue : state.singleValue || min;
+        if (state.singleValue === undefined) {
+            state.singleValue = currentValue;
+        }
+        const percentage = getPercentage(state.singleValue, min, max);
+        // Only keep dynamic styles as inline, use CSS classes for static styles
+        const containerStyle = vertical ? { height } : {};
+        const progressStyle = vertical
+            ? {
+                height: `${percentage}%`,
+            }
+            : {
+                width: `${percentage}%`,
+            };
+        const thumbStyle = vertical
+            ? {
+                bottom: `${percentage}%`,
+            }
+            : {
+                left: `${percentage}%`,
+                marginLeft: '-10px', // Half of thumb size (20px)
+            };
+        const updateSingleValue = (newValue, immediate = false) => {
+            state.singleValue = newValue;
+            if (immediate && oninput) {
+                oninput(newValue);
+            }
+            else if (!immediate && onchange) {
+                onchange(newValue);
+            }
+        };
+        const handleMouseDown = (e) => {
+            if (disabled)
+                return;
+            e.preventDefault();
+            state.isDragging = true;
+            // Get container reference from the current target's parent
+            const thumbElement = e.currentTarget;
+            const container = thumbElement.parentElement;
+            if (!container)
+                return;
+            const handleMouseMove = (e) => {
+                if (!state.isDragging || !container)
+                    return;
+                const rect = container.getBoundingClientRect();
+                let percentage;
+                if (vertical) {
+                    percentage = ((rect.bottom - e.clientY) / rect.height) * 100;
+                }
+                else {
+                    percentage = ((e.clientX - rect.left) / rect.width) * 100;
+                }
+                percentage = Math.max(0, Math.min(100, percentage));
+                const value = min + (percentage / 100) * (max - min);
+                const steppedValue = Math.round(value / step) * step;
+                updateSingleValue(steppedValue, true);
+                // Redraw to update the UI
+                m.redraw();
+            };
+            const handleMouseUp = () => {
+                state.isDragging = false;
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+                // Fire onchange when dragging ends
+                updateSingleValue(state.singleValue, false);
+            };
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+        };
+        const fieldClass = vertical ? 'range-field vertical' : 'range-field';
+        const orientation = vertical ? 'vertical' : 'horizontal';
+        return m('.input-field', { className: cn, style }, [
+            iconName ? m('i.material-icons.prefix', iconName) : undefined,
+            // Hidden input for label association and accessibility
+            m('input[type=range]', {
+                id,
+                value: state.singleValue,
+                min,
+                max,
+                step,
+                style: { display: 'none' },
+                disabled,
+                tabindex: -1,
+            }),
+            m('div', { class: fieldClass, style: containerStyle }, [
+                m(`.single-range-slider.${orientation}`, {
+                    tabindex: disabled ? -1 : 0,
+                    role: 'slider',
+                    'aria-valuemin': min,
+                    'aria-valuemax': max,
+                    'aria-valuenow': state.singleValue,
+                    'aria-label': label || 'Range slider',
+                    onclick: (e) => {
+                        // Focus the slider when clicked
+                        e.currentTarget.focus();
+                    },
+                    onkeydown: (e) => {
+                        if (disabled)
+                            return;
+                        let newValue = state.singleValue;
+                        switch (e.key) {
+                            case 'ArrowLeft':
+                            case 'ArrowDown':
+                                e.preventDefault();
+                                newValue = Math.max(min, newValue - step);
+                                updateSingleValue(newValue, false);
+                                m.redraw();
+                                break;
+                            case 'ArrowRight':
+                            case 'ArrowUp':
+                                e.preventDefault();
+                                newValue = Math.min(max, newValue + step);
+                                updateSingleValue(newValue, false);
+                                m.redraw();
+                                break;
+                            case 'Home':
+                                e.preventDefault();
+                                updateSingleValue(min, false);
+                                m.redraw();
+                                break;
+                            case 'End':
+                                e.preventDefault();
+                                updateSingleValue(max, false);
+                                m.redraw();
+                                break;
+                        }
+                    },
+                }, [
+                    // Track
+                    m(`.track.${orientation}`),
+                    // Progress
+                    m(`.range-progress.${orientation}`, { style: progressStyle }),
+                    // Thumb
+                    m(`.thumb.${orientation}`, {
+                        style: thumbStyle,
+                        onmousedown: handleMouseDown,
+                    }, showValue
+                        ? m(`.value-tooltip.${vertical ? 'right' : 'top'}`, state.singleValue.toFixed(0))
+                        : null),
+                ]),
+            ]),
+            label
+                ? m(Label, {
+                    label,
+                    id,
+                    isMandatory,
+                    isActive: true, // Range sliders always have active labels
+                })
+                : null,
+            helperText ? m(HelperText, { helperText }) : null,
+        ]);
+    };
+    // Render function for minmax range slider
+    const renderMinMaxRange = (attrs, state, cn, style, iconName, id, label, isMandatory, helperText) => {
+        const { min = 0, max = 100, step = 1, minValue, maxValue, vertical = false, showValue = false, height = '200px', disabled = false, } = attrs;
+        // Initialize range values
+        const currentMinValue = minValue !== undefined ? minValue : attrs.minValue || min;
+        const currentMaxValue = maxValue !== undefined ? maxValue : attrs.maxValue || max;
+        if (state.rangeMinValue === undefined || state.rangeMaxValue === undefined) {
+            state.rangeMinValue = currentMinValue;
+            state.rangeMaxValue = currentMaxValue;
+        }
+        // Initialize active thumb if not set
+        if (state.activeThumb === null) {
+            state.activeThumb = 'min';
+        }
+        const minPercentage = getPercentage(state.rangeMinValue, min, max);
+        const maxPercentage = getPercentage(state.rangeMaxValue, min, max);
+        // Only keep dynamic styles as inline, use CSS classes for static styles
+        const containerStyle = vertical ? { height } : {};
+        const rangeStyle = vertical
+            ? {
+                bottom: `${minPercentage}%`,
+                height: `${maxPercentage - minPercentage}%`,
+            }
+            : {
+                left: `${minPercentage}%`,
+                width: `${maxPercentage - minPercentage}%`,
+            };
+        // Only keep dynamic positioning and z-index as inline styles
+        const createThumbStyle = (percentage, isActive) => vertical
+            ? {
+                bottom: `${percentage}%`,
+                zIndex: isActive ? 10 : 5,
+            }
+            : {
+                left: `${percentage}%`,
+                marginLeft: '-10px', // Half of thumb size (20px)
+                zIndex: isActive ? 10 : 5,
+            };
+        const handleMouseDown = (thumb) => (e) => {
+            if (disabled)
+                return;
+            e.preventDefault();
+            state.isDragging = true;
+            state.activeThumb = thumb;
+            // Get container reference from the current target's parent
+            const thumbElement = e.currentTarget;
+            const container = thumbElement.parentElement;
+            if (!container)
+                return;
+            const handleMouseMove = (e) => {
+                if (!state.isDragging || !container)
+                    return;
+                const rect = container.getBoundingClientRect();
+                let percentage;
+                if (vertical) {
+                    percentage = ((rect.bottom - e.clientY) / rect.height) * 100;
+                }
+                else {
+                    percentage = ((e.clientX - rect.left) / rect.width) * 100;
+                }
+                percentage = Math.max(0, Math.min(100, percentage));
+                const value = min + (percentage / 100) * (max - min);
+                const steppedValue = Math.round(value / step) * step;
+                if (thumb === 'min') {
+                    updateRangeValues(Math.min(steppedValue, state.rangeMaxValue), state.rangeMaxValue, attrs, true);
+                }
+                else {
+                    updateRangeValues(state.rangeMinValue, Math.max(steppedValue, state.rangeMinValue), attrs, true);
+                }
+                // Redraw to update the UI
+                m.redraw();
+            };
+            const handleMouseUp = () => {
+                state.isDragging = false;
+                state.activeThumb = null;
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+                // Fire onchange when dragging ends
+                updateRangeValues(state.rangeMinValue, state.rangeMaxValue, attrs, false);
+            };
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+        };
+        const fieldClass = vertical ? 'range-field vertical' : 'range-field';
+        const orientation = vertical ? 'vertical' : 'horizontal';
+        return m('.input-field', { className: cn, style }, [
+            iconName ? m('i.material-icons.prefix', iconName) : undefined,
+            // Hidden inputs for label association and accessibility
+            m('input[type=range]', {
+                id,
+                value: state.rangeMinValue,
+                min,
+                max,
+                step,
+                style: { display: 'none' },
+                disabled,
+                tabindex: -1,
+            }),
+            m('input[type=range]', {
+                id: `${id}_max`,
+                value: state.rangeMaxValue,
+                min,
+                max,
+                step,
+                style: { display: 'none' },
+                disabled,
+                tabindex: -1,
+            }),
+            m(`.${fieldClass}`, [
+                m(`.double-range-slider.${orientation}`, {
+                    style: containerStyle,
+                    tabindex: disabled ? -1 : 0,
+                    role: 'slider',
+                    'aria-valuemin': min,
+                    'aria-valuemax': max,
+                    'aria-valuenow': state.rangeMinValue,
+                    'aria-valuetext': `${state.rangeMinValue} to ${state.rangeMaxValue}`,
+                    'aria-label': label || 'Range slider',
+                    onclick: (e) => {
+                        // Focus the slider when clicked
+                        e.currentTarget.focus();
+                    },
+                    onkeydown: (e) => {
+                        if (disabled)
+                            return;
+                        let newMinValue = state.rangeMinValue;
+                        let newMaxValue = state.rangeMaxValue;
+                        const activeThumb = state.activeThumb || 'min';
+                        switch (e.key) {
+                            case 'ArrowLeft':
+                            case 'ArrowDown':
+                                e.preventDefault();
+                                if (activeThumb === 'min') {
+                                    newMinValue = Math.max(min, newMinValue - step);
+                                    updateRangeValues(newMinValue, newMaxValue, attrs, false);
+                                }
+                                else {
+                                    newMaxValue = Math.max(newMinValue, newMaxValue - step);
+                                    updateRangeValues(newMinValue, newMaxValue, attrs, false);
+                                }
+                                m.redraw();
+                                break;
+                            case 'ArrowRight':
+                            case 'ArrowUp':
+                                e.preventDefault();
+                                if (activeThumb === 'min') {
+                                    newMinValue = Math.min(newMaxValue, newMinValue + step);
+                                    updateRangeValues(newMinValue, newMaxValue, attrs, false);
+                                }
+                                else {
+                                    newMaxValue = Math.min(max, newMaxValue + step);
+                                    updateRangeValues(newMinValue, newMaxValue, attrs, false);
+                                }
+                                m.redraw();
+                                break;
+                            // Remove Tab case - let normal tab navigation work
+                            // Users can click on specific thumbs to activate them
+                            case 'Home':
+                                e.preventDefault();
+                                if (activeThumb === 'min') {
+                                    updateRangeValues(min, newMaxValue, attrs, false);
+                                }
+                                else {
+                                    updateRangeValues(newMinValue, newMinValue, attrs, false);
+                                }
+                                m.redraw();
+                                break;
+                            case 'End':
+                                e.preventDefault();
+                                if (activeThumb === 'min') {
+                                    updateRangeValues(newMaxValue, newMaxValue, attrs, false);
+                                }
+                                else {
+                                    updateRangeValues(newMinValue, max, attrs, false);
+                                }
+                                m.redraw();
+                                break;
+                        }
+                    },
+                }, [
+                    // Track
+                    m(`.track.${orientation}`),
+                    // Range
+                    m(`.range.${orientation}`, { style: rangeStyle }),
+                    // Min thumb
+                    m(`.thumb.${orientation}.min-thumb${state.activeThumb === 'min' ? '.active' : ''}`, {
+                        style: createThumbStyle(minPercentage, state.activeThumb === 'min'),
+                        onmousedown: handleMouseDown('min'),
+                        onclick: () => {
+                            state.activeThumb = 'min';
+                            m.redraw();
+                        },
+                    }, showValue ? m(`.value.${orientation}`, state.rangeMinValue.toFixed(0)) : null),
+                    // Max thumb
+                    m(`.thumb.${orientation}.max-thumb${state.activeThumb === 'max' ? '.active' : ''}`, {
+                        style: createThumbStyle(maxPercentage, state.activeThumb === 'max'),
+                        onmousedown: handleMouseDown('max'),
+                        onclick: () => {
+                            state.activeThumb = 'max';
+                            m.redraw();
+                        },
+                    }, showValue ? m(`.value.${orientation}`, state.rangeMaxValue.toFixed(0)) : null),
+                ]),
+            ]),
+            label
+                ? m(Label, {
+                    label,
+                    id,
+                    isMandatory,
+                    isActive: true, // Range sliders always have active labels
+                })
+                : null,
+            helperText ? m(HelperText, { helperText }) : null,
+        ]);
+    };
     return {
         view: ({ attrs }) => {
             var _a;
@@ -2224,10 +2621,25 @@ const InputField = (type, defaultClass = '') => () => {
             const isActive = state.active || ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) || placeholder || type === 'color' || type === 'range'
                 ? true
                 : false;
+            // Special rendering for minmax range sliders
+            if (type === 'range' && attrs.minmax) {
+                return renderMinMaxRange(attrs, state, cn, style, iconName, id, label, isMandatory, helperText);
+            }
+            // Special rendering for single range sliders with tooltips
+            if (type === 'range' && attrs.showValue) {
+                return renderSingleRangeWithTooltip(attrs, state, cn, style, iconName, id, label, isMandatory, helperText);
+            }
             return m('.input-field', { className: cn, style }, [
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
                 m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id,
-                    placeholder, 
+                    placeholder, class: type === 'range' && attrs.vertical ? 'range-slider vertical' : undefined, style: type === 'range' && attrs.vertical
+                        ? {
+                            height: attrs.height || '200px',
+                            width: '6px',
+                            writingMode: 'vertical-lr',
+                            direction: 'rtl',
+                        }
+                        : undefined, 
                     // attributes,
                     oncreate: ({ dom }) => {
                         const input = (state.inputElement = dom);
@@ -2243,7 +2655,7 @@ const InputField = (type, defaultClass = '') => () => {
                             state.currentLength = input.value.length; // Initial count
                         }
                         // Range input functionality
-                        if (type === 'range') {
+                        if (type === 'range' && !attrs.minmax) {
                             const updateThumb = () => {
                                 const value = input.value;
                                 const min = input.min || '0';
@@ -3367,6 +3779,423 @@ const FloatingActionButton = () => {
     };
 };
 
+// Utility functions
+const getPercentage = (value, min, max) => {
+    return ((value - min) / (max - min)) * 100;
+};
+const updateRangeValues = (minValue, maxValue, attrs, state, immediate) => {
+    // Ensure min doesn't exceed max and vice versa
+    if (minValue > maxValue)
+        minValue = maxValue;
+    if (maxValue < minValue)
+        maxValue = minValue;
+    state.rangeMinValue = minValue;
+    state.rangeMaxValue = maxValue;
+    // Call oninput for immediate feedback or onchange for final changes
+    if (immediate && attrs.oninput) {
+        attrs.oninput(minValue, maxValue);
+    }
+    else if (!immediate && attrs.onchange) {
+        attrs.onchange(minValue, maxValue);
+    }
+};
+// Single Range Slider with Tooltip
+const renderSingleRangeWithTooltip = (attrs, state, cn, style, iconName, id, label, isMandatory, helperText) => {
+    const { min = 0, max = 100, step = 1, initialValue, vertical = false, showValue = false, height = '200px', disabled = false, tooltipPos = 'top', oninput, onchange, } = attrs;
+    // Initialize single range value
+    const currentValue = initialValue !== undefined ? initialValue : state.singleValue || min;
+    if (state.singleValue === undefined) {
+        state.singleValue = currentValue;
+    }
+    const percentage = getPercentage(state.singleValue, min, max);
+    // Only keep dynamic styles as inline, use CSS classes for static styles
+    const containerStyle = vertical ? { height } : {};
+    const progressStyle = vertical
+        ? {
+            height: `${percentage}%`,
+        }
+        : {
+            width: `${percentage}%`,
+        };
+    const thumbStyle = vertical
+        ? {
+            bottom: `${percentage}%`,
+        }
+        : {
+            left: `${percentage}%`,
+            marginLeft: '-10px', // Half of thumb size (20px)
+        };
+    const updateSingleValue = (newValue, immediate = false) => {
+        state.singleValue = newValue;
+        if (immediate && oninput) {
+            oninput(newValue);
+        }
+        else if (!immediate && onchange) {
+            onchange(newValue);
+        }
+    };
+    const handleMouseDown = (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        state.isDragging = true;
+        // Get container reference from the current target's parent
+        const thumbElement = e.currentTarget;
+        const container = thumbElement.parentElement;
+        if (!container)
+            return;
+        const handleMouseMove = (e) => {
+            if (!state.isDragging || !container)
+                return;
+            const rect = container.getBoundingClientRect();
+            let percentage;
+            if (vertical) {
+                percentage = ((rect.bottom - e.clientY) / rect.height) * 100;
+            }
+            else {
+                percentage = ((e.clientX - rect.left) / rect.width) * 100;
+            }
+            percentage = Math.max(0, Math.min(100, percentage));
+            const value = min + (percentage / 100) * (max - min);
+            const steppedValue = Math.round(value / step) * step;
+            updateSingleValue(steppedValue, true);
+            // Redraw to update the UI during drag
+            m.redraw();
+        };
+        const handleMouseUp = () => {
+            state.isDragging = false;
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            // Fire onchange when dragging ends
+            updateSingleValue(state.singleValue, false);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    };
+    const fieldClass = vertical ? 'range-field vertical' : 'range-field';
+    const orientation = vertical ? 'vertical' : 'horizontal';
+    // Determine tooltip position for vertical sliders
+    const tooltipPosition = vertical ? (tooltipPos === 'top' || tooltipPos === 'bottom' ? 'right' : tooltipPos) : tooltipPos;
+    return m('.input-field', { className: cn, style }, [
+        iconName ? m('i.material-icons.prefix', iconName) : undefined,
+        // Hidden input for label association and accessibility
+        m('input[type=range]', {
+            id,
+            value: state.singleValue,
+            min,
+            max,
+            step,
+            style: { display: 'none' },
+            disabled,
+            tabindex: -1,
+        }),
+        m('div', { class: fieldClass, style: containerStyle }, [
+            m(`.single-range-slider.${orientation}`, {
+                tabindex: disabled ? -1 : 0,
+                role: 'slider',
+                'aria-valuemin': min,
+                'aria-valuemax': max,
+                'aria-valuenow': state.singleValue,
+                'aria-label': label || 'Range slider',
+                onclick: (e) => {
+                    // Focus the slider when clicked
+                    e.currentTarget.focus();
+                },
+                onkeydown: (e) => {
+                    if (disabled)
+                        return;
+                    let newValue = state.singleValue;
+                    switch (e.key) {
+                        case 'ArrowLeft':
+                        case 'ArrowDown':
+                            e.preventDefault();
+                            newValue = Math.max(min, newValue - step);
+                            updateSingleValue(newValue, false);
+                            // m.redraw();
+                            break;
+                        case 'ArrowRight':
+                        case 'ArrowUp':
+                            e.preventDefault();
+                            newValue = Math.min(max, newValue + step);
+                            updateSingleValue(newValue, false);
+                            // m.redraw();
+                            break;
+                        case 'Home':
+                            e.preventDefault();
+                            updateSingleValue(min, false);
+                            // m.redraw();
+                            break;
+                        case 'End':
+                            e.preventDefault();
+                            updateSingleValue(max, false);
+                            // m.redraw();
+                            break;
+                    }
+                },
+            }, [
+                // Track
+                m(`.track.${orientation}`),
+                // Progress
+                m(`.range-progress.${orientation}`, { style: progressStyle }),
+                // Thumb
+                m(`.thumb.${orientation}`, {
+                    style: thumbStyle,
+                    onmousedown: handleMouseDown,
+                }, showValue
+                    ? m(`.value-tooltip.${tooltipPosition}`, state.singleValue.toFixed(0))
+                    : null),
+            ]),
+        ]),
+        label
+            ? m(Label, {
+                label,
+                id,
+                isMandatory,
+                isActive: true, // Range sliders always have active labels
+            })
+            : null,
+        helperText ? m(HelperText, { helperText }) : null,
+    ]);
+};
+// Double Range Slider (Min/Max)
+const renderMinMaxRange = (attrs, state, cn, style, iconName, id, label, isMandatory, helperText) => {
+    const { min = 0, max = 100, step = 1, minValue, maxValue, vertical = false, showValue = false, height = '200px', disabled = false, } = attrs;
+    // Initialize range values
+    const currentMinValue = minValue !== undefined ? minValue : attrs.minValue || min;
+    const currentMaxValue = maxValue !== undefined ? maxValue : attrs.maxValue || max;
+    if (state.rangeMinValue === undefined || state.rangeMaxValue === undefined) {
+        state.rangeMinValue = currentMinValue;
+        state.rangeMaxValue = currentMaxValue;
+    }
+    // Initialize active thumb if not set
+    if (state.activeThumb === null) {
+        state.activeThumb = 'min';
+    }
+    const minPercentage = getPercentage(state.rangeMinValue, min, max);
+    const maxPercentage = getPercentage(state.rangeMaxValue, min, max);
+    // Only keep dynamic styles as inline, use CSS classes for static styles
+    const containerStyle = vertical ? { height } : {};
+    const rangeStyle = vertical
+        ? {
+            bottom: `${minPercentage}%`,
+            height: `${maxPercentage - minPercentage}%`,
+        }
+        : {
+            left: `${minPercentage}%`,
+            width: `${maxPercentage - minPercentage}%`,
+        };
+    // Only keep dynamic positioning and z-index as inline styles
+    const createThumbStyle = (percentage, isActive) => vertical
+        ? {
+            bottom: `${percentage}%`,
+            zIndex: isActive ? 10 : 5,
+        }
+        : {
+            left: `${percentage}%`,
+            marginLeft: '-10px', // Half of thumb size (20px)
+            zIndex: isActive ? 10 : 5,
+        };
+    const handleMouseDown = (thumb) => (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        state.isDragging = true;
+        state.activeThumb = thumb;
+        // Get container reference from the current target's parent
+        const thumbElement = e.currentTarget;
+        const container = thumbElement.parentElement;
+        if (!container)
+            return;
+        const handleMouseMove = (e) => {
+            if (!state.isDragging || !container)
+                return;
+            const rect = container.getBoundingClientRect();
+            let percentage;
+            if (vertical) {
+                percentage = ((rect.bottom - e.clientY) / rect.height) * 100;
+            }
+            else {
+                percentage = ((e.clientX - rect.left) / rect.width) * 100;
+            }
+            percentage = Math.max(0, Math.min(100, percentage));
+            const value = min + (percentage / 100) * (max - min);
+            const steppedValue = Math.round(value / step) * step;
+            if (thumb === 'min') {
+                updateRangeValues(Math.min(steppedValue, state.rangeMaxValue), state.rangeMaxValue, attrs, state, true);
+            }
+            else {
+                updateRangeValues(state.rangeMinValue, Math.max(steppedValue, state.rangeMinValue), attrs, state, true);
+            }
+            // Redraw to update the UI during drag
+            m.redraw();
+        };
+        const handleMouseUp = () => {
+            state.isDragging = false;
+            state.activeThumb = null;
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            // Fire onchange when dragging ends
+            updateRangeValues(state.rangeMinValue, state.rangeMaxValue, attrs, state, false);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    };
+    const fieldClass = vertical ? 'range-field vertical' : 'range-field';
+    const orientation = vertical ? 'vertical' : 'horizontal';
+    return m('.input-field', { className: cn, style }, [
+        iconName ? m('i.material-icons.prefix', iconName) : undefined,
+        // Hidden inputs for label association and accessibility
+        m('input[type=range]', {
+            id,
+            value: state.rangeMinValue,
+            min,
+            max,
+            step,
+            style: { display: 'none' },
+            disabled,
+            tabindex: -1,
+        }),
+        m('input[type=range]', {
+            id: `${id}_max`,
+            value: state.rangeMaxValue,
+            min,
+            max,
+            step,
+            style: { display: 'none' },
+            disabled,
+            tabindex: -1,
+        }),
+        m(`div`, { className: fieldClass }, [
+            m(`.double-range-slider.${orientation}`, {
+                style: containerStyle,
+                tabindex: disabled ? -1 : 0,
+                role: 'slider',
+                'aria-valuemin': min,
+                'aria-valuemax': max,
+                'aria-valuenow': state.rangeMinValue,
+                'aria-valuetext': `${state.rangeMinValue} to ${state.rangeMaxValue}`,
+                'aria-label': label || 'Range slider',
+                onclick: (e) => {
+                    // Focus the slider when clicked
+                    e.currentTarget.focus();
+                },
+                onkeydown: (e) => {
+                    if (disabled)
+                        return;
+                    let newMinValue = state.rangeMinValue;
+                    let newMaxValue = state.rangeMaxValue;
+                    const activeThumb = state.activeThumb || 'min';
+                    switch (e.key) {
+                        case 'ArrowLeft':
+                        case 'ArrowDown':
+                            e.preventDefault();
+                            if (activeThumb === 'min') {
+                                newMinValue = Math.max(min, newMinValue - step);
+                                updateRangeValues(newMinValue, newMaxValue, attrs, state, false);
+                            }
+                            else {
+                                newMaxValue = Math.max(newMinValue, newMaxValue - step);
+                                updateRangeValues(newMinValue, newMaxValue, attrs, state, false);
+                            }
+                            // m.redraw();
+                            break;
+                        case 'ArrowRight':
+                        case 'ArrowUp':
+                            e.preventDefault();
+                            if (activeThumb === 'min') {
+                                newMinValue = Math.min(newMaxValue, newMinValue + step);
+                                updateRangeValues(newMinValue, newMaxValue, attrs, state, false);
+                            }
+                            else {
+                                newMaxValue = Math.min(max, newMaxValue + step);
+                                updateRangeValues(newMinValue, newMaxValue, attrs, state, false);
+                            }
+                            // m.redraw();
+                            break;
+                        case 'Tab':
+                            // Handle Tab navigation properly
+                            if (activeThumb === 'min') {
+                                if (e.shiftKey) {
+                                    // Shift+Tab from min thumb: go to previous element (let browser handle)
+                                    return; // Don't prevent default
+                                }
+                                else {
+                                    // Tab from min thumb: go to max thumb
+                                    e.preventDefault();
+                                    state.activeThumb = 'max';
+                                }
+                            }
+                            else { // activeThumb === 'max'
+                                if (e.shiftKey) {
+                                    // Shift+Tab from max thumb: go to min thumb
+                                    e.preventDefault();
+                                    state.activeThumb = 'min';
+                                }
+                                else {
+                                    // Tab from max thumb: go to next element (let browser handle)
+                                    return; // Don't prevent default
+                                }
+                            }
+                            break;
+                        case 'Home':
+                            e.preventDefault();
+                            if (activeThumb === 'min') {
+                                updateRangeValues(min, newMaxValue, attrs, state, false);
+                            }
+                            else {
+                                updateRangeValues(newMinValue, newMinValue, attrs, state, false);
+                            }
+                            // m.redraw();
+                            break;
+                        case 'End':
+                            e.preventDefault();
+                            if (activeThumb === 'min') {
+                                updateRangeValues(newMaxValue, newMaxValue, attrs, state, false);
+                            }
+                            else {
+                                updateRangeValues(newMinValue, max, attrs, state, false);
+                            }
+                            // m.redraw();
+                            break;
+                    }
+                },
+            }, [
+                // Track
+                m(`.track.${orientation}`),
+                // Range
+                m(`.range.${orientation}`, { style: rangeStyle }),
+                // Min thumb
+                m(`.thumb.${orientation}.min-thumb${state.activeThumb === 'min' ? '.active' : ''}`, {
+                    style: createThumbStyle(minPercentage, state.activeThumb === 'min'),
+                    onmousedown: handleMouseDown('min'),
+                    onclick: () => {
+                        state.activeThumb = 'min';
+                        // m.redraw();
+                    },
+                }, showValue ? m(`.value.${orientation}`, state.rangeMinValue.toFixed(0)) : null),
+                // Max thumb
+                m(`.thumb.${orientation}.max-thumb${state.activeThumb === 'max' ? '.active' : ''}`, {
+                    style: createThumbStyle(maxPercentage, state.activeThumb === 'max'),
+                    onmousedown: handleMouseDown('max'),
+                    onclick: () => {
+                        state.activeThumb = 'max';
+                        // m.redraw();
+                    },
+                }, showValue ? m(`.value.${orientation}`, state.rangeMaxValue.toFixed(0)) : null),
+            ]),
+        ]),
+        label
+            ? m(Label, {
+                label,
+                id,
+                isMandatory,
+                isActive: true, // Range sliders always have active labels
+            })
+            : null,
+        helperText ? m(HelperText, { helperText }) : null,
+    ]);
+};
+
 /**
  * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
  * No MaterializeCSS dependencies
@@ -7102,4 +7931,4 @@ const isValidationError = (result) => !isValidationSuccess(result);
 // ============================================================================
 // All types are already exported via individual export declarations above
 
-export { AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, InputCheckbox, Label, LargeButton, ListItem, Mandatory, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, Toast, ToastComponent, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, createBreadcrumb, getDropdownStyles, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, toast, uniqueId, uuid4 };
+export { AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, InputCheckbox, Label, LargeButton, ListItem, Mandatory, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, Toast, ToastComponent, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, createBreadcrumb, getDropdownStyles, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, renderMinMaxRange, renderSingleRangeWithTooltip, toast, uniqueId, uuid4 };