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

package/dist/index.umd.js

@@ -2194,6 +2194,12 @@
             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;
@@ -2219,6 +2225,397 @@
                 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;
@@ -2228,10 +2625,25 @@
                 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);
@@ -2247,7 +2659,7 @@
                                 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';
@@ -3371,6 +3783,423 @@
         };
     };
 
+    // 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
@@ -7183,6 +8012,8 @@
     exports.isValidationSuccess = isValidationSuccess;
     exports.padLeft = padLeft;
     exports.range = range;
+    exports.renderMinMaxRange = renderMinMaxRange;
+    exports.renderSingleRangeWithTooltip = renderSingleRangeWithTooltip;
     exports.toast = toast;
     exports.uniqueId = uniqueId;
     exports.uuid4 = uuid4;