From 4cf6b1eb38bd25e25fdb9c745b5635c492daa2c6 Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Thu, 17 Apr 2025 20:31:15 +0100
Subject: [PATCH 01/21] Re-implement Slider in Numerical Range filter

---
 .../FiltersConfigForm/FiltersConfigForm.tsx   | 109 +++--
 .../components/nativeFilters/utils.ts         |   1 +
 .../Range/RangeFilterPlugin.test.tsx          |  98 +++-
 .../components/Range/RangeFilterPlugin.tsx    | 430 +++++++++++++-----
 .../src/filters/components/Range/types.ts     |   7 +
 .../src/filters/components/common.ts          |  10 +-
 6 files changed, 510 insertions(+), 145 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index 01effc9aa1a3..a45000e692ad 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -81,6 +81,7 @@ import DateFilterControl from 'src/explore/components/controls/DateFilterControl
 import AdhocFilterControl from 'src/explore/components/controls/FilterControl/AdhocFilterControl';
 import { waitForAsyncData } from 'src/middleware/asyncEvent';
 import { SingleValueType } from 'src/filters/components/Range/SingleValueType';
+import { RangeDisplayMode } from 'src/filters/components/Range/types';
 import {
   getFormData,
   mergeExtraFormData,
@@ -1157,50 +1158,104 @@ const FiltersConfigForm = (
                   </CollapsibleControl>
                 </CleanFormItem>
               ) : (
-                <CleanFormItem name={['filters', filterId, 'rangeFilter']}>
-                  <CollapsibleControl
-                    initialValue={hasEnableSingleValue}
-                    title={t('Single Value')}
-                    onChange={checked => {
-                      onEnableSingleValueChanged(
-                        checked ? SingleValueType.Exact : undefined,
-                      );
-                      formChanged();
-                    }}
-                  >
+                <>
+                  <CleanFormItem name={['filters', filterId, 'rangeFilter']}>
+                    <CollapsibleControl
+                      initialValue={hasEnableSingleValue}
+                      title={t('Single Value')}
+                      onChange={checked => {
+                        onEnableSingleValueChanged(
+                          checked ? SingleValueType.Exact : undefined,
+                        );
+                        formChanged();
+                      }}
+                    >
+                      <StyledRowFormItem
+                        expanded={expanded}
+                        name={[
+                          'filters',
+                          filterId,
+                          'controlValues',
+                          'enableSingleValue',
+                        ]}
+                        initialValue={enableSingleValue}
+                        label={
+                          <StyledLabel>{t('Single value type')}</StyledLabel>
+                        }
+                      >
+                        <Radio.GroupWrapper
+                          onChange={value => {
+                            onEnableSingleValueChanged(value.target.value);
+                            formChanged();
+                          }}
+                          options={[
+                            {
+                              label: t('Minimum'),
+                              value: SingleValueType.Minimum,
+                            },
+                            { label: t('Exact'), value: SingleValueType.Exact },
+                            {
+                              label: t('Maximum'),
+                              value: SingleValueType.Maximum,
+                            },
+                          ]}
+                        />
+                      </StyledRowFormItem>
+                    </CollapsibleControl>
+                  </CleanFormItem>
+
+                  <CleanFormItem name={['filters', filterId, 'rangeType']}>
                     <StyledRowFormItem
                       expanded={expanded}
                       name={[
                         'filters',
                         filterId,
                         'controlValues',
-                        'enableSingleValue',
+                        'rangeDisplayMode',
                       ]}
-                      initialValue={enableSingleValue}
-                      label={
-                        <StyledLabel>{t('Single value type')}</StyledLabel>
+                      initialValue={
+                        formFilter?.controlValues?.rangeDisplayMode ||
+                        filterToEdit?.controlValues?.rangeDisplayMode ||
+                        RangeDisplayMode.SliderAndInput
                       }
+                      label={<StyledLabel>{t('Range Type')}</StyledLabel>}
                     >
-                      <Radio.GroupWrapper
-                        onChange={value => {
-                          onEnableSingleValueChanged(value.target.value);
-                          formChanged();
-                        }}
+                      <Select
+                        ariaLabel={t('Range Type')}
                         options={[
                           {
-                            label: t('Minimum'),
-                            value: SingleValueType.Minimum,
+                            value: RangeDisplayMode.Slider,
+                            label: t('Slider'),
+                          },
+                          {
+                            value: RangeDisplayMode.Input,
+                            label: t('Range Inputs'),
                           },
-                          { label: t('Exact'), value: SingleValueType.Exact },
                           {
-                            label: t('Maximum'),
-                            value: SingleValueType.Maximum,
+                            value: RangeDisplayMode.SliderAndInput,
+                            label: t('Slider and range input'),
                           },
                         ]}
+                        onChange={value => {
+                          const previous =
+                            form.getFieldValue('filters')?.[filterId]
+                              .controlValues || {};
+                          const rangeDisplayMode =
+                            value || RangeDisplayMode.SliderAndInput;
+                          setNativeFilterFieldValues(form, filterId, {
+                            controlValues: {
+                              ...previous,
+                              rangeDisplayMode,
+                            },
+                          });
+
+                          forceUpdate();
+                          formChanged();
+                        }}
                       />
                     </StyledRowFormItem>
-                  </CollapsibleControl>
-                </CleanFormItem>
+                  </CleanFormItem>
+                </>
               )}
             </Collapse.Panel>
           )}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
index c883ed040392..1e849ce5af0b 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
@@ -83,6 +83,7 @@ export const getFormData = ({
   return {
     ...controlValues,
     ...otherProps,
+    controlValues,
     adhoc_filters: adhoc_filters ?? [],
     extra_filters: [],
     extra_form_data: dependencies,
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
index 855482027efb..640a553dfa5a 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
@@ -17,8 +17,10 @@
  * under the License.
  */
 import { AppSection, GenericDataType } from '@superset-ui/core';
-import { fireEvent, render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from 'spec/helpers/testing-library';
 import RangeFilterPlugin from './RangeFilterPlugin';
+import { RangeDisplayMode } from './types';
 import { SingleValueType } from './SingleValueType';
 import transformProps from './transformProps';
 
@@ -101,7 +103,7 @@ describe('RangeFilterPlugin', () => {
     jest.clearAllMocks();
   });
 
-  it('should render two numerical inputs', () => {
+  it('should render two numerical inputs and a slider by default', () => {
     getWrapper();
 
     const inputs = screen.getAllByRole('spinbutton');
@@ -109,26 +111,32 @@ describe('RangeFilterPlugin', () => {
 
     expect(inputs[0]).toHaveValue('10');
     expect(inputs[1]).toHaveValue('70');
+
+    // For a range slider, there are two slider handles
+    const sliders = screen.getAllByRole('slider');
+    expect(sliders.length).toBeGreaterThan(0);
   });
 
-  it('should set the data mask to error when the range is incorrect', () => {
+  it('should set the data mask to error when the range is incorrect', async () => {
     getWrapper({ filterState: { value: [null, null] } });
 
     const inputs = screen.getAllByRole('spinbutton');
     const fromInput = inputs[0];
     const toInput = inputs[1];
 
-    fireEvent.change(fromInput, { target: { value: 20 } });
+    userEvent.clear(fromInput);
+    userEvent.type(fromInput, '20');
 
-    fireEvent.change(toInput, { target: { value: 10 } });
+    userEvent.clear(toInput);
+    userEvent.type(toInput, '10');
 
-    fireEvent.blur(toInput);
+    userEvent.tab();
 
     expect(setDataMask).toHaveBeenCalledWith({
       extraFormData: {},
       filterState: {
         label: '',
-        validateMessage: 'Please provide a valid range',
+        validateMessage: 'Min value cannot be greater than max value',
         validateStatus: 'error',
         value: null,
       },
@@ -186,8 +194,10 @@ describe('RangeFilterPlugin', () => {
         value: [20, null],
       },
     });
-    const input = screen.getByRole('spinbutton');
-    expect(input).toHaveValue('20');
+
+    const inputs = screen.getAllByRole('spinbutton');
+    expect(inputs).toHaveLength(2);
+    expect(inputs[0]).toHaveValue('20');
   });
 
   it('should call setDataMask with correct less than filter', () => {
@@ -214,8 +224,10 @@ describe('RangeFilterPlugin', () => {
         validateStatus: undefined,
       },
     });
-    const input = screen.getByRole('spinbutton');
-    expect(input).toHaveValue('60');
+
+    const inputs = screen.getAllByRole('spinbutton');
+    expect(inputs).toHaveLength(2);
+    expect(inputs[1]).toHaveValue('60');
   });
 
   it('should call setDataMask with correct exact filter', () => {
@@ -242,5 +254,69 @@ describe('RangeFilterPlugin', () => {
         validateMessage: '',
       },
     });
+
+    const inputs = screen.getAllByRole('spinbutton');
+    expect(inputs).toHaveLength(2);
+    expect(inputs[0]).toHaveValue('10');
+  });
+
+  describe('Range Display Modes', () => {
+    it('should render only the slider in slider mode', () => {
+      getWrapper({
+        formData: {
+          controlValues: { rangeDisplayMode: RangeDisplayMode.Slider },
+        },
+      });
+
+      const sliders = screen.getAllByRole('slider');
+      expect(sliders.length).toBeGreaterThan(0);
+
+      expect(screen.queryAllByRole('spinbutton')).toHaveLength(0);
+    });
+
+    it('should render only inputs in input mode', () => {
+      getWrapper({
+        formData: {
+          controlValues: { rangeDisplayMode: RangeDisplayMode.Input },
+        },
+      });
+
+      const inputs = screen.getAllByRole('spinbutton');
+      expect(inputs).toHaveLength(2);
+
+      expect(screen.queryAllByRole('slider')).toHaveLength(0);
+    });
+
+    it('should render both slider and inputs in slider-and-input mode', () => {
+      getWrapper({
+        formData: {
+          controlValues: { rangeDisplayMode: RangeDisplayMode.SliderAndInput },
+        },
+      });
+
+      // Should show inputs
+      const inputs = screen.getAllByRole('spinbutton');
+      expect(inputs).toHaveLength(2);
+
+      // Should show slider
+      const sliders = screen.getAllByRole('slider');
+      expect(sliders.length).toBeGreaterThan(0);
+    });
+
+    it('should default to slider-and-input mode when not specified', () => {
+      getWrapper({
+        formData: {
+          controlValues: {},
+        },
+      });
+
+      // Should show inputs
+      const inputs = screen.getAllByRole('spinbutton');
+      expect(inputs).toHaveLength(2);
+
+      // Should show slider
+      const sliders = screen.getAllByRole('slider');
+      expect(sliders.length).toBeGreaterThan(0);
+    });
   });
 });
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index c717d8c267ea..4947836ef158 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -27,10 +27,13 @@ import {
 } from '@superset-ui/core';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { InputNumber } from 'src/components/Input';
+import Slider from 'src/components/Slider';
 import { FilterBarOrientation } from 'src/dashboard/types';
 import Metadata from 'src/components/Metadata';
 import { isNumber } from 'lodash';
-import { PluginFilterRangeProps } from './types';
+import { Tooltip } from 'src/components/Tooltip';
+import Icons from 'src/components/Icons';
+import { PluginFilterRangeProps, RangeDisplayMode } from './types';
 import { StatusMessage, StyledFormItem, FilterPluginStyle } from '../common';
 import { getRangeExtraFormData } from '../../utils';
 import { SingleValueType } from './SingleValueType';
@@ -49,13 +52,65 @@ const StyledDivider = styled.span`
 const Wrapper = styled.div`
   display: flex;
   justify-content: space-between;
+  width: 100%;
 
   .antd5-input-number {
     width: 100%;
+    min-width: 80px;
     position: relative;
   }
 `;
 
+const SliderWrapper = styled.div`
+  margin: ${({ theme }) => theme.gridUnit * 4}px 0;
+  padding: 0 ${({ theme }) => theme.gridUnit}px;
+  width: 100%;
+  min-width: 200px;
+`;
+
+const ErrorIconWrapper = styled.div`
+  margin-right: ${({ theme }) => theme.gridUnit * 2}px;
+  display: flex;
+  align-items: center;
+`;
+
+const HorizontalLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.gridUnit * 4}px;
+  width: 100%;
+
+  .controls-container {
+    display: flex;
+    align-items: center;
+    gap: ${({ theme }) => theme.gridUnit * 4}px;
+    width: 100%;
+
+    .slider-wrapper {
+      display: flex;
+      align-items: center;
+      flex: 2;
+    }
+
+    .slider-container {
+      flex: 1;
+      min-width: 180px;
+    }
+
+    .inputs-container {
+      flex: 1;
+      min-width: 200px;
+      max-width: 300px;
+    }
+  }
+
+  .message-container {
+    width: 100%;
+    text-align: center;
+    padding-top: ${({ theme }) => theme.gridUnit * 2}px;
+  }
+`;
+
 const numberFormatter = getNumberFormatter(NumberFormats.SMART_NUMBER);
 
 const getLabel = (
@@ -90,14 +145,19 @@ const validateRange = (
 ): { isValid: boolean; errorMessage: string | null } => {
   const [inputMin, inputMax] = values;
   const requiredError = t('Filter value is required');
-  const rangeError = t('Please provide a value within range');
+  const rangeError = t('Numbers must be within %(min)s and %(max)s', {
+    min,
+    max,
+  });
+
+  // Single value validation
   if (enableSingleValue !== undefined) {
     const isSingleMin =
       enableSingleValue === SingleValueType.Minimum ||
       enableSingleValue === SingleValueType.Exact;
     const value = isSingleMin ? inputMin : inputMax;
 
-    if (!value && enableEmptyFilter) {
+    if (!isNumber(value) && !enableEmptyFilter) {
       return { isValid: false, errorMessage: requiredError };
     }
 
@@ -109,27 +169,40 @@ const validateRange = (
   }
 
   // Range validation
-  if (enableEmptyFilter && (inputMin === null || inputMax === null)) {
-    return { isValid: false, errorMessage: t('Please provide a valid range') };
+  // Allow empty ranges if enableEmptyFilter is false
+  if (!enableEmptyFilter && inputMin === null && inputMax === null) {
+    return { isValid: true, errorMessage: null };
   }
 
-  if (!enableEmptyFilter && (inputMin !== null) !== (inputMax !== null)) {
-    return { isValid: false, errorMessage: t('Please provide a valid range') };
+  // If enableEmptyFilter is true, at least one value is required
+  if (enableEmptyFilter && inputMin === null && inputMax === null) {
+    return {
+      isValid: false,
+      errorMessage: t('Please provide a valid min or max value'),
+    };
   }
 
-  if (inputMin !== null && inputMax !== null) {
-    if (inputMin > inputMax) {
-      return {
-        isValid: false,
-        errorMessage: t('Minimum value cannot be higher than maximum value'),
-      };
-    }
-    if (inputMin < min || inputMax > max) {
-      return {
-        isValid: false,
-        errorMessage: t('Your range is not within the dataset range'),
-      };
-    }
+  // Check individual value bounds if provided
+  if (inputMin !== null && (inputMin < min || inputMin > max)) {
+    return {
+      isValid: false,
+      errorMessage: rangeError,
+    };
+  }
+
+  if (inputMax !== null && (inputMax < min || inputMax > max)) {
+    return {
+      isValid: false,
+      errorMessage: rangeError,
+    };
+  }
+
+  // Check relationship between min and max when both are provided
+  if (inputMin !== null && inputMax !== null && inputMin > inputMax) {
+    return {
+      isValid: false,
+      errorMessage: t('Min value cannot be greater than max value'),
+    };
   }
 
   return { isValid: true, errorMessage: null };
@@ -151,15 +224,22 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
     inputRef,
     filterBarOrientation = FilterBarOrientation.Vertical,
   } = props;
+
   const [row] = data;
   // @ts-ignore
   const { min, max }: { min: number; max: number } = row;
   const { groupby, enableSingleValue, enableEmptyFilter, defaultValue } =
     formData;
+
+  // Access controlValues from either the top level (new format) or nested (old format)
+  const controlValues = formData?.controlValues || {};
+  const rangeDisplayMode =
+    controlValues.rangeDisplayMode || RangeDisplayMode.SliderAndInput;
+
   const minIndex = 0;
   const maxIndex = 1;
+
   const enableSingleExactValue = enableSingleValue === SingleValueType.Exact;
-  const rangeInput = enableSingleValue === undefined;
 
   const [col = ''] = ensureIsArray(groupby).map(getColumnLabel);
 
@@ -168,6 +248,30 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
   );
   const [error, setError] = useState<string | null>(null);
 
+  // Prepare slider value from input value, converting nulls to min/max
+  const sliderValue = useMemo(() => {
+    const [inputMin, inputMax] = inputValue;
+
+    // For single value filters
+    if (enableSingleValue === SingleValueType.Minimum) {
+      return inputMin !== null ? inputMin : min;
+    }
+    if (enableSingleValue === SingleValueType.Maximum) {
+      return inputMax !== null ? inputMax : max;
+    }
+    if (enableSingleValue === SingleValueType.Exact) {
+      return inputMin !== null ? inputMin : (min + max) / 2;
+    }
+
+    // For range filters - use placeholders when values are null
+    // If only min is provided, set max to the dataset max
+    // If only max is provided, set min to the dataset min
+    const sliderMin = inputMin !== null ? inputMin : min;
+    const sliderMax = inputMax !== null ? inputMax : max;
+
+    return [sliderMin, sliderMax];
+  }, [inputValue, min, max, enableSingleValue]);
+
   const updateDataMaskError = useCallback(
     (errorMessage: string | null) => {
       setDataMask({
@@ -206,39 +310,28 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       return;
     }
 
-    if (
-      filterState.validateStatus === 'error' &&
-      error !== filterState.validateMessage
-    ) {
+    // Handle error case
+    if (filterState.validateStatus === 'error') {
       setError(filterState.validateMessage);
 
-      const [inputMin, inputMax] = inputValue;
-
-      const { isValid, errorMessage } = validateRange(
-        inputValue,
-        min,
-        max,
-        enableEmptyFilter,
-        enableSingleValue,
-      );
-
-      const isDefaultError =
-        inputMin === null &&
-        inputMax === null &&
-        filterState.validateStatus === 'error';
-
-      if (!isValid || isDefaultError) {
-        setError(errorMessage);
-        updateDataMaskError(errorMessage);
-        return;
+      // Only re-validate if message changed to prevents redundant validation
+      if (error !== filterState.validateMessage) {
+        const { isValid, errorMessage } = validateRange(
+          inputValue,
+          min,
+          max,
+          enableEmptyFilter,
+          enableSingleValue,
+        );
+
+        if (!isValid) {
+          setError(errorMessage);
+          updateDataMaskError(errorMessage);
+        } else {
+          setError(null);
+          updateDataMaskValue(inputValue);
+        }
       }
-
-      setError(null);
-      updateDataMaskValue(inputValue);
-      return;
-    }
-    if (filterState.validateStatus === 'error') {
-      setError(filterState.validateMessage);
       return;
     }
 
@@ -261,6 +354,7 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
     }
   }, [JSON.stringify(filterState.value)]);
 
+  // Get just the filter behavior text without the range information (which is shown in the tooltip)
   const metadataText = useMemo(() => {
     switch (enableSingleValue) {
       case SingleValueType.Minimum:
@@ -270,7 +364,7 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       case SingleValueType.Exact:
         return t('Filters for values equal to this exact value.');
       default:
-        return '';
+        return null; // Don't show redundant metadata for range filters
     }
   }, [enableSingleValue]);
 
@@ -303,29 +397,111 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       setError(null);
       updateDataMaskValue(newInputValue);
     },
-    [col, min, max, enableEmptyFilter, enableSingleValue, setDataMask],
+    [
+      min,
+      max,
+      enableEmptyFilter,
+      enableSingleValue,
+      updateDataMaskError,
+      updateDataMaskValue,
+      inputValue,
+    ],
+  );
+
+  // Handler for slider change
+  const handleSliderChange = useCallback(
+    (value: number[]) => {
+      if (row?.min === undefined && row?.max === undefined) {
+        return;
+      }
+
+      let newInputValue: RangeValue;
+
+      const [sliderMin, sliderMax] =
+        value.length >= 2 ? [value[0], value[1]] : [min, max];
+
+      if (enableSingleValue !== undefined) {
+        // Apply single value logic but still using the range UI
+        if (enableSingleValue === SingleValueType.Minimum) {
+          newInputValue = [sliderMin, null];
+        } else if (enableSingleValue === SingleValueType.Maximum) {
+          newInputValue = [null, sliderMax];
+        } else {
+          // Exact - use the same value for both
+          newInputValue = [sliderMin, sliderMin];
+        }
+      } else {
+        // Regular range case
+        newInputValue = [sliderMin, sliderMax];
+      }
+
+      setInputValue(newInputValue);
+
+      // Slider values should always be valid since they're constrained by min/max props
+      setError(null);
+      updateDataMaskValue(newInputValue);
+    },
+    [min, max, enableSingleValue, updateDataMaskValue],
   );
 
-  const formItemExtra = useMemo(() => {
+  // Create different error display components for vertical and horizontal orientations
+  const verticalErrorDisplay = useMemo(() => {
     if (error) {
       return <StatusMessage status="error">{error}</StatusMessage>;
     }
-    return undefined;
-  }, [error]);
+    // Display the range info message in vertical orientation when no error
+    return (
+      <StatusMessage status="help">
+        {t('Choose numbers between %(min)s and %(max)s', { min, max })};
+      </StatusMessage>
+    );
+  }, [error, min, max]);
+
+  // Info/Error tooltip component for horizontal orientation - always shown
+  const InfoTooltip = useCallback(() => {
+    // Determine the tooltip message and icon color
+    const tooltipMessage =
+      error || t('Choose numbers between %(min)s and %(max)s', { min, max });
+    const iconColor = error ? 'error' : 'primary';
+
+    // Use ExclamationCircleOutlined for errors, InfoCircleOutlined otherwise
+    const IconComponent = error
+      ? Icons.ExclamationCircleOutlined
+      : Icons.InfoCircleOutlined;
+
+    return (
+      <ErrorIconWrapper>
+        <Tooltip title={tooltipMessage} placement="top">
+          <IconComponent
+            iconColor={iconColor}
+            iconSize="m"
+            style={{ color: error ? '#FF0000' : undefined }}
+          />
+        </Tooltip>
+      </ErrorIconWrapper>
+    );
+  }, [error, min, max]);
 
   useEffect(() => {
-    switch (enableSingleValue) {
-      case SingleValueType.Minimum:
-      case SingleValueType.Exact:
-        handleChange(null, maxIndex);
-        break;
-      case SingleValueType.Maximum:
-        handleChange(null, minIndex);
-        break;
-      default:
-        break;
+    if (enableSingleValue !== undefined) {
+      switch (enableSingleValue) {
+        case SingleValueType.Minimum:
+        case SingleValueType.Exact:
+          if (inputValue[maxIndex] !== null) {
+            handleChange(null, maxIndex);
+          }
+          break;
+        case SingleValueType.Maximum:
+          if (inputValue[minIndex] !== null) {
+            handleChange(null, minIndex);
+          }
+          break;
+        default:
+          break;
+      }
     }
 
+    // Reset data mask when single value mode changes
     setDataMask({
       extraFormData: {},
       filterState: {
@@ -335,6 +511,55 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
     });
   }, [enableSingleValue]);
 
+  const renderSlider = () => (
+    <SliderWrapper>
+      <Slider
+        min={min}
+        max={max}
+        range
+        value={Array.isArray(sliderValue) ? sliderValue : [min, sliderValue]}
+        onChange={handleSliderChange}
+        tooltip={{
+          formatter: val => (val !== null ? numberFormatter(val) : ''),
+        }}
+      />
+    </SliderWrapper>
+  );
+
+  const renderInputs = () => (
+    <Wrapper
+      tabIndex={-1}
+      ref={inputRef}
+      onFocus={setFocusedFilter}
+      onBlur={unsetFocusedFilter}
+      onMouseEnter={setHoveredFilter}
+      onMouseLeave={unsetHoveredFilter}
+      onMouseDown={() => setFilterActive(true)}
+      onMouseUp={() => setFilterActive(false)}
+    >
+      {/* Always show both input fields for range mode */}
+      <InputNumber
+        value={inputValue[minIndex]}
+        onChange={val => handleChange(val, minIndex)}
+        placeholder={`${min}`}
+        style={{ width: '100%' }}
+        status={filterState.validateStatus}
+        data-test="range-filter-from-input"
+      />
+
+      <StyledDivider>-</StyledDivider>
+
+      <InputNumber
+        value={inputValue[maxIndex]}
+        onChange={val => handleChange(val, maxIndex)}
+        placeholder={`${max}`}
+        style={{ width: '100%' }}
+        data-test="range-filter-to-input"
+        status={filterState.validateStatus}
+      />
+    </Wrapper>
+  );
+
   return (
     <FilterPluginStyle height={height} width={width}>
       {Number.isNaN(Number(min)) || Number.isNaN(Number(max)) ? (
@@ -342,46 +567,41 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       ) : (
         <StyledFormItem
           aria-labelledby={`filter-name-${formData.nativeFilterId}`}
-          extra={formItemExtra}
+          extra={
+            filterBarOrientation === FilterBarOrientation.Vertical
+              ? verticalErrorDisplay
+              : undefined
+          }
         >
-          <Wrapper
-            tabIndex={-1}
-            ref={inputRef}
-            onFocus={setFocusedFilter}
-            onBlur={unsetFocusedFilter}
-            onMouseEnter={setHoveredFilter}
-            onMouseLeave={unsetHoveredFilter}
-            onMouseDown={() => setFilterActive(true)}
-            onMouseUp={() => setFilterActive(false)}
-          >
-            {(enableSingleValue === SingleValueType.Minimum ||
-              enableSingleValue === SingleValueType.Exact ||
-              enableSingleValue === undefined) && (
-              <InputNumber
-                value={inputValue[minIndex]}
-                onChange={val => handleChange(val, minIndex)}
-                placeholder={`${min}`}
-                status={filterState.validateStatus}
-                data-test="range-filter-from-input"
-              />
-            )}
-            {enableSingleValue === undefined && (
-              <StyledDivider>-</StyledDivider>
-            )}
-            {(enableSingleValue === SingleValueType.Maximum ||
-              enableSingleValue === undefined) && (
-              <InputNumber
-                value={inputValue[maxIndex]}
-                onChange={val => handleChange(val, maxIndex)}
-                placeholder={`${max}`}
-                data-test="range-filter-to-input"
-                status={filterState.validateStatus}
-              />
-            )}
-          </Wrapper>
-          {(rangeInput ||
-            filterBarOrientation === FilterBarOrientation.Vertical) &&
-            !filterState.validateStatus && <Metadata value={metadataText} />}
+          {filterBarOrientation === FilterBarOrientation.Horizontal ? (
+            <HorizontalLayout>
+              <div className="controls-container">
+                <InfoTooltip />
+                {(rangeDisplayMode === RangeDisplayMode.Slider ||
+                  rangeDisplayMode === RangeDisplayMode.SliderAndInput) && (
+                  <div className="slider-wrapper">
+                    <div className="slider-container">{renderSlider()}</div>
+                  </div>
+                )}
+                {(rangeDisplayMode === RangeDisplayMode.Input ||
+                  rangeDisplayMode === RangeDisplayMode.SliderAndInput) && (
+                  <div className="inputs-container">{renderInputs()}</div>
+                )}
+              </div>
+            </HorizontalLayout>
+          ) : (
+            <>
+              {(rangeDisplayMode === RangeDisplayMode.Slider ||
+                rangeDisplayMode === RangeDisplayMode.SliderAndInput) &&
+                renderSlider()}
+              {(rangeDisplayMode === RangeDisplayMode.Input ||
+                rangeDisplayMode === RangeDisplayMode.SliderAndInput) &&
+                renderInputs()}
+            </>
+          )}
+          {!filterState.validateStatus && metadataText && (
+            <Metadata value={metadataText} />
+          )}
         </StyledFormItem>
       )}
     </FilterPluginStyle>
diff --git a/superset-frontend/src/filters/components/Range/types.ts b/superset-frontend/src/filters/components/Range/types.ts
index 25a18bb3e86b..d020ebf96d01 100644
--- a/superset-frontend/src/filters/components/Range/types.ts
+++ b/superset-frontend/src/filters/components/Range/types.ts
@@ -26,9 +26,16 @@ import { RefObject } from 'react';
 import { PluginFilterHooks, PluginFilterStylesProps } from '../types';
 import { FilterBarOrientation } from '../../../dashboard/types';
 
+export enum RangeDisplayMode {
+  Slider = 'slider',
+  Input = 'input',
+  SliderAndInput = 'slider-and-input',
+}
+
 interface PluginFilterSelectCustomizeProps {
   max?: number;
   min?: number;
+  rangeDisplayMode?: RangeDisplayMode;
 }
 
 export type PluginFilterRangeQueryFormData = QueryFormData &
diff --git a/superset-frontend/src/filters/components/common.ts b/superset-frontend/src/filters/components/common.ts
index cb6d7f22f14b..a66e952eafcd 100644
--- a/superset-frontend/src/filters/components/common.ts
+++ b/superset-frontend/src/filters/components/common.ts
@@ -34,7 +34,13 @@ export const StyledFormItem = styled(FormItem)`
 `;
 
 export const StatusMessage = styled.div<{
-  status?: 'error' | 'warning' | 'info';
+  status?: 'error' | 'warning' | 'info' | 'help';
+  centerText?: boolean;
 }>`
-  color: ${({ theme, status = 'error' }) => theme.colors[status]?.base};
+  color: ${({ theme, status = 'error' }) =>
+    status === 'help'
+      ? theme.colors.grayscale.light1
+      : theme.colors[status]?.base};
+  text-align: ${({ centerText }) => (centerText ? 'center' : 'left')};
+  width: 100%;
 `;

From d481ebe099771e8146941532e56b44b200734440 Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Thu, 17 Apr 2025 21:38:24 +0100
Subject: [PATCH 02/21] fixed tooltip icon

---
 .../components/Range/RangeFilterPlugin.tsx     | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index 4947836ef158..7c9f0fcafcf9 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -32,7 +32,7 @@ import { FilterBarOrientation } from 'src/dashboard/types';
 import Metadata from 'src/components/Metadata';
 import { isNumber } from 'lodash';
 import { Tooltip } from 'src/components/Tooltip';
-import Icons from 'src/components/Icons';
+import { Icons } from 'src/components/Icons';
 import { PluginFilterRangeProps, RangeDisplayMode } from './types';
 import { StatusMessage, StyledFormItem, FilterPluginStyle } from '../common';
 import { getRangeExtraFormData } from '../../utils';
@@ -462,21 +462,15 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
     // Determine the tooltip message and icon color
     const tooltipMessage =
       error || t('Choose numbers between %(min)s and %(max)s', { min, max });
-    const iconColor = error ? 'error' : 'primary';
-
-    // Use ExclamationCircleOutlined for errors, InfoCircleOutlined otherwise
-    const IconComponent = error
-      ? Icons.ExclamationCircleOutlined
-      : Icons.InfoCircleOutlined;
 
     return (
       <ErrorIconWrapper>
         <Tooltip title={tooltipMessage} placement="top">
-          <IconComponent
-            iconColor={iconColor}
-            iconSize="m"
-            style={{ color: error ? '#FF0000' : undefined }}
-          />
+          {error ? (
+            <Icons.ExclamationCircleOutlined iconSize="m" iconColor="error" />
+          ) : (
+            <Icons.InfoCircleOutlined iconSize="m" iconColor="primary" />
+          )}
         </Tooltip>
       </ErrorIconWrapper>
     );

From 38f0f9c2af84fcca676264088dac7b09970de5f9 Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Tue, 22 Apr 2025 16:51:57 +0100
Subject: [PATCH 03/21] User can create a numerical range filter with different
 display modes

---
 .../nativeFilters.noInitState.test.ts         | 72 +++++++++++++++----
 1 file changed, 59 insertions(+), 13 deletions(-)

diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.noInitState.test.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.noInitState.test.ts
index 8f3c5b024ff1..ff34e8f07a6c 100644
--- a/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.noInitState.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.noInitState.test.ts
@@ -183,7 +183,7 @@ describe('Native filters', () => {
       validateFilterContentOnDashboard(testItems.topTenChart.filterColumnYear);
     });
 
-    it('User can create a numerical range filter', () => {
+    it('User can create a numerical range filter with different display modes', () => {
       visitDashboard();
       enterNativeFilterEditModal(false);
       fillNativeFilterForm(
@@ -192,35 +192,81 @@ describe('Native filters', () => {
         testItems.datasetForNativeFilter,
         testItems.filterNumericalColumn,
       );
-      saveNativeFilterSettings([]);
 
-      // Assertions
-      cy.get('[data-test="range-filter-from-input"]')
-        .should('be.visible')
-        .click();
+      // 1. First test "Range Inputs" mode
+      cy.get('.ant-collapse-header').contains('Filter Configuration').click();
+      cy.contains('Range Type').parent().find('.ant-select-selector').click();
+      cy.contains('Range Inputs').click();
 
+      saveNativeFilterSettings([]);
+
+      // Test inputs functionality
+      cy.get('[data-test="range-filter-from-input"]').should('be.visible');
+      cy.get('[data-test="range-filter-from-input"]').click();
       cy.get('[data-test="range-filter-from-input"]').type('{selectall}5');
 
+      cy.get('[data-test="range-filter-to-input"]').should('be.visible');
+      cy.get('[data-test="range-filter-to-input"]').click();
+      cy.get('[data-test="range-filter-to-input"]').type('{selectall}50');
+
+      cy.get(nativeFilters.applyFilter).click();
+
+      // Verify inputs have correct values
+      cy.get('[data-test="range-filter-from-input"]')
+        .invoke('val')
+        .should('equal', '5');
+
       cy.get('[data-test="range-filter-to-input"]')
-        .should('be.visible')
-        .click();
+        .invoke('val')
+        .should('equal', '50');
+
+      // 2. Now test "Slider" mode
+      enterNativeFilterEditModal(false);
+      cy.get('.ant-collapse-header').contains('Filter Configuration').click();
+      cy.contains('Range Type').parent().find('.ant-select-selector').click();
+      cy.contains('Slider').click();
+
+      saveNativeFilterSettings([]);
+
+      // Verify slider exists and inputs don't
+      cy.get('.ant-slider').should('be.visible');
+      cy.get('[data-test="range-filter-from-input"]').should('not.exist');
+      cy.get('[data-test="range-filter-to-input"]').should('not.exist');
+
+      // 3. Finally test "Slider and range input" mode (default)
+      enterNativeFilterEditModal(false);
+      cy.get('.ant-collapse-header').contains('Filter Configuration').click();
+      cy.contains('Range Type').parent().find('.ant-select-selector').click();
+      cy.contains('Slider and range input').click();
+
+      saveNativeFilterSettings([]);
+
+      // Verify both slider and inputs exist
+      cy.get('.ant-slider').should('be.visible');
+      cy.get('[data-test="range-filter-from-input"]').should('be.visible');
+      cy.get('[data-test="range-filter-to-input"]').should('be.visible');
+
+      // Test inputs still work in combined mode
+      cy.get('[data-test="range-filter-from-input"]').click();
+      cy.get('[data-test="range-filter-from-input"]').type('{selectall}10');
+
+      cy.get('[data-test="range-filter-to-input"]').click();
+      cy.get('[data-test="range-filter-to-input"]').type('{selectall}40');
 
-      cy.get('[data-test="range-filter-to-input"]').type('{selectall}50');
       cy.get(nativeFilters.applyFilter).click();
 
-      // Assert that the URL contains 'native_filters'
+      // Final assertions - both inputs should have updated values
       cy.url().then(u => {
         const ur = new URL(u);
         expect(ur.search).to.include('native_filters');
 
         cy.get('[data-test="range-filter-from-input"]')
           .invoke('val')
-          .should('equal', '5');
+          .should('equal', '10');
 
-        // Assert that the "To" input has the correct value
         cy.get('[data-test="range-filter-to-input"]')
           .invoke('val')
-          .should('equal', '50');
+          .should('equal', '40');
       });
     });
 

From 06d07ff3971e31fd8a603b75a8acc678adcdc783 Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Wed, 23 Apr 2025 15:07:52 +0100
Subject: [PATCH 04/21] User can create a numerical range filter with different
 display modes

---
 .../nativeFilters.noInitState.test.ts         | 89 +++++++++++++++----
 .../cypress/e2e/dashboard/utils.ts            | 44 ++++++---
 .../cypress-base/cypress/support/e2e.ts       |  2 +-
 3 files changed, 107 insertions(+), 28 deletions(-)

diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.noInitState.test.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.noInitState.test.ts
index ff34e8f07a6c..85984ee3ba58 100644
--- a/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.noInitState.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.noInitState.test.ts
@@ -194,9 +194,30 @@ describe('Native filters', () => {
       );
 
       // 1. First test "Range Inputs" mode
-      cy.get('.ant-collapse-header').contains('Filter Configuration').click();
-      cy.contains('Range Type').parent().find('.ant-select-selector').click();
-      cy.contains('Range Inputs').click();
+      // First expand the Filter Configuration section if it's not already expanded
+      cy.get('.ant-collapse-header')
+        .contains('Filter Configuration')
+        .then($header => {
+          // Check if panel is already expanded
+          const isExpanded = $header
+            .closest('.ant-collapse-item')
+            .hasClass('ant-collapse-item-active');
+          if (!isExpanded) {
+            cy.wrap($header).click();
+            cy.wait(1000); // Give it more time to fully expand
+          }
+        });
+
+      cy.contains('Range Type')
+        .should('be.visible')
+        .closest('.ant-form-item')
+        .find('.ant-select-selector')
+        .click({ force: true });
+
+      // Select Range Inputs option from dropdown
+      cy.get('.ant-select-dropdown:visible')
+        .contains('.ant-select-item-option', 'Range Input')
+        .click({ force: true });
 
       saveNativeFilterSettings([]);
 
@@ -222,29 +243,67 @@ describe('Native filters', () => {
 
       // 2. Now test "Slider" mode
       enterNativeFilterEditModal(false);
-      cy.get('.ant-collapse-header').contains('Filter Configuration').click();
-      cy.contains('Range Type').parent().find('.ant-select-selector').click();
-      cy.contains('Slider').click();
+
+      cy.get('.ant-collapse-header')
+        .contains('Filter Configuration')
+        .then($header => {
+          const isExpanded = $header
+            .closest('.ant-collapse-item')
+            .hasClass('ant-collapse-item-active');
+          if (!isExpanded) {
+            cy.wrap($header).click();
+            cy.wait(1000); // Give it more time to fully expand
+          }
+        });
+
+      cy.contains('Range Type')
+        .should('be.visible')
+        .closest('.ant-form-item')
+        .find('.ant-select-selector')
+        .click({ force: true });
+
+      // Select Slider option from dropdown
+      cy.get('.ant-select-dropdown:visible')
+        .contains('.ant-select-item-option', 'Slider')
+        .click({ force: true });
 
       saveNativeFilterSettings([]);
 
       // Verify slider exists and inputs don't
-      cy.get('.ant-slider').should('be.visible');
+
       cy.get('[data-test="range-filter-from-input"]').should('not.exist');
       cy.get('[data-test="range-filter-to-input"]').should('not.exist');
 
       // 3. Finally test "Slider and range input" mode (default)
       enterNativeFilterEditModal(false);
-      cy.get('.ant-collapse-header').contains('Filter Configuration').click();
-      cy.contains('Range Type').parent().find('.ant-select-selector').click();
-      cy.contains('Slider and range input').click();
 
-      saveNativeFilterSettings([]);
+      // First expand the Filter Configuration section if it's not already expanded
+      cy.get('.ant-collapse-header')
+        .contains('Filter Configuration')
+        .then($header => {
+          // Check if panel is already expanded
+          const isExpanded = $header
+            .closest('.ant-collapse-item')
+            .hasClass('ant-collapse-item-active');
+          if (!isExpanded) {
+            cy.wrap($header).click();
+            cy.wait(1000); // Give it more time to fully expand
+          }
+        });
+
+      // Now find the Range Type field in the filter modal
+      cy.contains('Range Type')
+        .should('be.visible')
+        .closest('.ant-form-item')
+        .find('.ant-select-selector')
+        .click({ force: true });
 
-      // Verify both slider and inputs exist
-      cy.get('.ant-slider').should('be.visible');
-      cy.get('[data-test="range-filter-from-input"]').should('be.visible');
-      cy.get('[data-test="range-filter-to-input"]').should('be.visible');
+      // Select Slider and range input option from dropdown
+      cy.get('.ant-select-dropdown:visible')
+        .contains('.ant-select-item-option', 'Slider and range input')
+        .click({ force: true });
+
+      saveNativeFilterSettings([]);
 
       // Test inputs still work in combined mode
       cy.get('[data-test="range-filter-from-input"]').click();
diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts
index 40c1d3827200..5b6b9dcbbcd0 100644
--- a/superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts
@@ -293,16 +293,22 @@ export function fillNativeFilterForm(
   }
   cy.get(nativeFilters.silentLoading).should('not.exist');
   if (filterColumn) {
-    cy.get(nativeFilters.filtersPanel.filterInfoInput)
-      .last()
+    cy.contains('label', 'Column').closest('.ant-form-item').as('columnField');
+
+    cy.get('@columnField').find('.ant-select-selector').click({ force: true });
+
+    cy.wait(300);
+
+    cy.get('.ant-select-selection-search-input:focus').type(filterColumn, {
+      force: true,
+    });
+
+    cy.wait(500);
+
+    cy.get('.ant-select-dropdown')
+      .should('be.visible')
+      .contains('.ant-select-item-option', filterColumn)
       .click({ force: true });
-    cy.get(nativeFilters.filtersPanel.filterInfoInput)
-      .last()
-      .type(filterColumn);
-    cy.get(nativeFilters.filtersPanel.inputDropdown)
-      .should('be.visible', { timeout: 20000 })
-      .last()
-      .click();
   }
   cy.get(nativeFilters.silentLoading).should('not.exist');
 }
@@ -362,9 +368,23 @@ export function saveNativeFilterSettings(charts: ChartSpec[]) {
   cy.get(nativeFilters.modal.footer)
     .contains('Save')
     .should('be.visible')
-    .click();
-  cy.get(nativeFilters.modal.container).should('not.exist');
-  charts.forEach(waitForChartLoad);
+    .click({ force: true });
+
+  cy.wait(2000);
+
+  cy.get('body').then($body => {
+    if ($body.find(nativeFilters.modal.container).length > 0) {
+      cy.get(nativeFilters.modal.footer)
+        .contains('Save')
+        .click({ force: true });
+
+      cy.wait(1000);
+    }
+
+    charts.forEach(chart => {
+      waitForChartLoad(chart);
+    });
+  });
 }
 
 /** ************************************************************************
diff --git a/superset-frontend/cypress-base/cypress/support/e2e.ts b/superset-frontend/cypress-base/cypress/support/e2e.ts
index 18572b6ab2e7..17ac14c7e6cc 100644
--- a/superset-frontend/cypress-base/cypress/support/e2e.ts
+++ b/superset-frontend/cypress-base/cypress/support/e2e.ts
@@ -166,7 +166,7 @@ Cypress.Commands.add('login', () => {
   cy.request({
     method: 'POST',
     url: '/login/',
-    body: { username: 'admin', password: 'general' },
+    body: { username: 'admin', password: 'admin' },
   }).then(response => {
     if (response.status === 302) {
       // If there's a redirect, follow it manually

From 7bf77e6c13ebe44457caa529db65576b0e994d37 Mon Sep 17 00:00:00 2001
From: Pius Iniobong <inipayose@gmail.com>
Date: Wed, 23 Apr 2025 15:44:35 +0100
Subject: [PATCH 05/21] Update e2e.ts

---
 superset-frontend/cypress-base/cypress/support/e2e.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/cypress-base/cypress/support/e2e.ts b/superset-frontend/cypress-base/cypress/support/e2e.ts
index 17ac14c7e6cc..18572b6ab2e7 100644
--- a/superset-frontend/cypress-base/cypress/support/e2e.ts
+++ b/superset-frontend/cypress-base/cypress/support/e2e.ts
@@ -166,7 +166,7 @@ Cypress.Commands.add('login', () => {
   cy.request({
     method: 'POST',
     url: '/login/',
-    body: { username: 'admin', password: 'admin' },
+    body: { username: 'admin', password: 'general' },
   }).then(response => {
     if (response.status === 302) {
       // If there's a redirect, follow it manually

From d7288567d0d5ddbe3668ce1d48b08581330a76da Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Wed, 23 Apr 2025 17:39:45 +0100
Subject: [PATCH 06/21] filter has default value should have default value

---
 .../FiltersConfigForm/FiltersConfigForm.tsx   | 35 +++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index a45000e692ad..285a7afd72ec 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -1290,6 +1290,23 @@ const FiltersConfigForm = (
                     setNativeFilterFieldValues(form, filterId, {
                       defaultDataMask: null,
                     });
+                  } else {
+                    // When the checkbox is checked, explicitly set an empty default data mask
+                    // for range filters to trigger validation
+                    if (formFilter?.filterType === 'filter_range') {
+                      setNativeFilterFieldValues(form, filterId, {
+                        defaultDataMask: {
+                          extraFormData: {},
+                          filterState: {
+                            value: [null, null],
+                          },
+                        },
+                      });
+                    }
+                    // Validate immediately when the checkbox is checked
+                    form.validateFields([
+                      ['filters', filterId, 'defaultDataMask'],
+                    ]);
                   }
                   formChanged();
                 }}
@@ -1305,9 +1322,20 @@ const FiltersConfigForm = (
                     rules={[
                       {
                         validator: () => {
-                          if (formFilter?.defaultDataMask?.filterState?.value) {
-                            // requires managing the error as the DefaultValue
-                            // component does not use an Antdesign compatible input
+                          // For range filters, check if at least one of the values in the array is non-null
+                          const value =
+                            formFilter?.defaultDataMask?.filterState?.value;
+                          const isRangeFilter =
+                            formFilter?.filterType === 'filter_range';
+
+                          // Check if value exists and is valid
+                          const hasValidValue =
+                            (isRangeFilter &&
+                              Array.isArray(value) &&
+                              (value[0] !== null || value[1] !== null)) ||
+                            (!isRangeFilter && !!value);
+
+                          if (hasValidValue) {
                             const formValidationFields = form.getFieldsError();
                             setErroredFilters(prevErroredFilters => {
                               if (
@@ -1322,6 +1350,7 @@ const FiltersConfigForm = (
                             });
                             return Promise.resolve();
                           }
+
                           setErroredFilters(prevErroredFilters => {
                             if (prevErroredFilters.includes(filterId)) {
                               return prevErroredFilters;

From b2ebe9d6aef67bc6225341e1ea47ee96dcb34000 Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Wed, 23 Apr 2025 23:57:39 +0100
Subject: [PATCH 07/21] korbit ai review changes

---
 .../cypress/e2e/dashboard/utils.ts            | 38 ++++++++++---------
 .../FiltersConfigForm/FiltersConfigForm.tsx   | 16 +++++---
 .../components/nativeFilters/utils.ts         |  1 -
 .../Range/RangeFilterPlugin.test.tsx          |  8 ++--
 .../components/Range/RangeFilterPlugin.tsx    | 14 ++-----
 5 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts
index 5b6b9dcbbcd0..c6f9de965e6f 100644
--- a/superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts
@@ -293,22 +293,21 @@ export function fillNativeFilterForm(
   }
   cy.get(nativeFilters.silentLoading).should('not.exist');
   if (filterColumn) {
+    // Target and alias the column field
     cy.contains('label', 'Column').closest('.ant-form-item').as('columnField');
 
-    cy.get('@columnField').find('.ant-select-selector').click({ force: true });
+    cy.get('@columnField').find('.ant-select-selector').click();
 
-    cy.wait(300);
-
-    cy.get('.ant-select-selection-search-input:focus').type(filterColumn, {
-      force: true,
-    });
-
-    cy.wait(500);
+    cy.get('@columnField')
+      .find('.ant-select-selection-search-input')
+      .should('be.visible')
+      .type(filterColumn, { delay: 100 });
 
     cy.get('.ant-select-dropdown')
       .should('be.visible')
       .contains('.ant-select-item-option', filterColumn)
-      .click({ force: true });
+      .should('be.visible')
+      .click();
   }
   cy.get(nativeFilters.silentLoading).should('not.exist');
 }
@@ -370,20 +369,23 @@ export function saveNativeFilterSettings(charts: ChartSpec[]) {
     .should('be.visible')
     .click({ force: true });
 
-  cy.wait(2000);
-
-  cy.get('body').then($body => {
-    if ($body.find(nativeFilters.modal.container).length > 0) {
+  // Wait for modal to either close or remain open
+  cy.get('body').should($body => {
+    const modalExists = $body.find(nativeFilters.modal.container).length > 0;
+    if (modalExists) {
       cy.get(nativeFilters.modal.footer)
         .contains('Save')
+        .should('be.visible')
         .click({ force: true });
-
-      cy.wait(1000);
     }
+  });
 
-    charts.forEach(chart => {
-      waitForChartLoad(chart);
-    });
+  // Ensure modal is closed
+  cy.get(nativeFilters.modal.container).should('not.exist');
+
+  // Wait for all charts to load
+  charts.forEach(chart => {
+    waitForChartLoad(chart);
   });
 }
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index 285a7afd72ec..a3e54bea983f 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -816,6 +816,13 @@ const FiltersConfigForm = (
     </StyledRowFormItem>
   );
 
+  const isValidFilterValue = (value: any, isRangeFilter: boolean) => {
+    if (isRangeFilter) {
+      return Array.isArray(value) && (value[0] !== null || value[1] !== null);
+    }
+    return !!value;
+  };
+
   return (
     <StyledTabs
       activeKey={activeTabKey}
@@ -1329,11 +1336,10 @@ const FiltersConfigForm = (
                             formFilter?.filterType === 'filter_range';
 
                           // Check if value exists and is valid
-                          const hasValidValue =
-                            (isRangeFilter &&
-                              Array.isArray(value) &&
-                              (value[0] !== null || value[1] !== null)) ||
-                            (!isRangeFilter && !!value);
+                          const hasValidValue = isValidFilterValue(
+                            value,
+                            isRangeFilter,
+                          );
 
                           if (hasValidValue) {
                             const formValidationFields = form.getFieldsError();
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
index 1e849ce5af0b..c883ed040392 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
@@ -83,7 +83,6 @@ export const getFormData = ({
   return {
     ...controlValues,
     ...otherProps,
-    controlValues,
     adhoc_filters: adhoc_filters ?? [],
     extra_filters: [],
     extra_form_data: dependencies,
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
index 640a553dfa5a..ba89bfac0e4f 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
@@ -264,7 +264,7 @@ describe('RangeFilterPlugin', () => {
     it('should render only the slider in slider mode', () => {
       getWrapper({
         formData: {
-          controlValues: { rangeDisplayMode: RangeDisplayMode.Slider },
+          rangeDisplayMode: RangeDisplayMode.Slider,
         },
       });
 
@@ -277,7 +277,7 @@ describe('RangeFilterPlugin', () => {
     it('should render only inputs in input mode', () => {
       getWrapper({
         formData: {
-          controlValues: { rangeDisplayMode: RangeDisplayMode.Input },
+          rangeDisplayMode: RangeDisplayMode.Input,
         },
       });
 
@@ -290,7 +290,7 @@ describe('RangeFilterPlugin', () => {
     it('should render both slider and inputs in slider-and-input mode', () => {
       getWrapper({
         formData: {
-          controlValues: { rangeDisplayMode: RangeDisplayMode.SliderAndInput },
+          rangeDisplayMode: RangeDisplayMode.SliderAndInput,
         },
       });
 
@@ -306,7 +306,7 @@ describe('RangeFilterPlugin', () => {
     it('should default to slider-and-input mode when not specified', () => {
       getWrapper({
         formData: {
-          controlValues: {},
+          // No rangeDisplayMode specified
         },
       });
 
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index 7c9f0fcafcf9..4ad93bd95e0c 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -231,10 +231,9 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
   const { groupby, enableSingleValue, enableEmptyFilter, defaultValue } =
     formData;
 
-  // Access controlValues from either the top level (new format) or nested (old format)
-  const controlValues = formData?.controlValues || {};
+  // Get the display mode from formData
   const rangeDisplayMode =
-    controlValues.rangeDisplayMode || RangeDisplayMode.SliderAndInput;
+    formData?.rangeDisplayMode || RangeDisplayMode.SliderAndInput;
 
   const minIndex = 0;
   const maxIndex = 1;
@@ -411,10 +410,6 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
   // Handler for slider change
   const handleSliderChange = useCallback(
     (value: number[]) => {
-      if (row?.min === undefined && row?.max === undefined) {
-        return;
-      }
-
       let newInputValue: RangeValue;
 
       const [sliderMin, sliderMax] =
@@ -436,15 +431,13 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       }
 
       setInputValue(newInputValue);
-
-      // Slider values should always be valid since they're constrained by min/max props
       setError(null);
       updateDataMaskValue(newInputValue);
     },
     [min, max, enableSingleValue, updateDataMaskValue],
   );
 
-  // Create different error display components for vertical and horizontal orientations
+  // different error display components for vertical and horizontal orientations
   const verticalErrorDisplay = useMemo(() => {
     if (error) {
       return <StatusMessage status="error">{error}</StatusMessage>;
@@ -459,7 +452,6 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
 
   // Info/Error tooltip component for horizontal orientation - always shown
   const InfoTooltip = useCallback(() => {
-    // Determine the tooltip message and icon color
     const tooltipMessage =
       error || t('Choose numbers between %(min)s and %(max)s', { min, max });
 

From 6a99111365e3aee34b1a85236232e04a8ecd9a4a Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Mon, 28 Apr 2025 15:15:23 +0100
Subject: [PATCH 08/21] fix for when single value is enabled

---
 .../components/nativeFilters/selectors.ts     |  16 +-
 .../components/Range/RangeFilterPlugin.tsx    | 142 +++++++++++-------
 2 files changed, 95 insertions(+), 63 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts b/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts
index 40b362e86c18..066737d7a13f 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts
@@ -342,6 +342,7 @@ const cachedNativeFilterDataForChart: Record<
     rejectedColumns: Set<string>;
   }
 > = {};
+
 export const selectNativeIndicatorsForChart = (
   nativeFilters: Filters,
   dataMask: DataMaskStateWithId,
@@ -355,17 +356,16 @@ export const selectNativeIndicatorsForChart = (
 
   const cachedFilterData = cachedNativeFilterDataForChart[chartId];
   if (
-    cachedNativeIndicatorsForChart[chartId] &&
-    areObjectsEqual(cachedFilterData?.appliedColumns, appliedColumns) &&
-    areObjectsEqual(cachedFilterData?.rejectedColumns, rejectedColumns) &&
-    cachedFilterData?.nativeFilters === nativeFilters &&
-    cachedFilterData?.chartLayoutItems === chartLayoutItems &&
-    cachedFilterData?.chartConfiguration === chartConfiguration &&
-    cachedFilterData?.dataMask === dataMask
+    cachedNativeIndicatorsForChart[chartId]?.length &&
+    areObjectsEqual(cachedFilterData.appliedColumns, appliedColumns) &&
+    areObjectsEqual(cachedFilterData.rejectedColumns, rejectedColumns) &&
+    areObjectsEqual(cachedFilterData.nativeFilters, nativeFilters) &&
+    areObjectsEqual(cachedFilterData.chartLayoutItems, chartLayoutItems) &&
+    areObjectsEqual(cachedFilterData.chartConfiguration, chartConfiguration) &&
+    areObjectsEqual(cachedFilterData.dataMask, dataMask)
   ) {
     return cachedNativeIndicatorsForChart[chartId];
   }
-
   const nativeFilterIndicators =
     nativeFilters &&
     Object.values(nativeFilters)
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index 4ad93bd95e0c..b80bd6e055ea 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -363,7 +363,7 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       case SingleValueType.Exact:
         return t('Filters for values equal to this exact value.');
       default:
-        return null; // Don't show redundant metadata for range filters
+        return null;
     }
   }, [enableSingleValue]);
 
@@ -409,24 +409,31 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
 
   // Handler for slider change
   const handleSliderChange = useCallback(
-    (value: number[]) => {
+    (value: number | number[]) => {
       let newInputValue: RangeValue;
 
-      const [sliderMin, sliderMax] =
-        value.length >= 2 ? [value[0], value[1]] : [min, max];
-
       if (enableSingleValue !== undefined) {
-        // Apply single value logic but still using the range UI
+        // Single value mode - value is a number
+        const singleValue =
+          typeof value === 'number'
+            ? value
+            : Array.isArray(value) && value.length > 0
+              ? value[0]
+              : (min + max) / 2;
+
         if (enableSingleValue === SingleValueType.Minimum) {
-          newInputValue = [sliderMin, null];
+          newInputValue = [singleValue, null];
         } else if (enableSingleValue === SingleValueType.Maximum) {
-          newInputValue = [null, sliderMax];
+          newInputValue = [null, singleValue];
         } else {
           // Exact - use the same value for both
-          newInputValue = [sliderMin, sliderMin];
+          newInputValue = [singleValue, singleValue];
         }
       } else {
-        // Regular range case
+        // Regular range case - value is an array
+        const arrayValue = Array.isArray(value) ? value : [min, max];
+        const [sliderMin, sliderMax] =
+          arrayValue.length >= 2 ? [arrayValue[0], arrayValue[1]] : [min, max];
         newInputValue = [sliderMin, sliderMax];
       }
 
@@ -437,28 +444,44 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
     [min, max, enableSingleValue, updateDataMaskValue],
   );
 
-  // different error display components for vertical and horizontal orientations
-  const verticalErrorDisplay = useMemo(() => {
+  // First, create a shared function to determine the message and status
+  // First, create a shared function to determine the message and status
+  const getMessageAndStatus = useCallback(() => {
+    const defaultMessage = t('Choose numbers between %(min)s and %(max)s', {
+      min,
+      max,
+    });
+
     if (error) {
-      return <StatusMessage status="error">{error}</StatusMessage>;
+      return { message: error, status: 'error' };
     }
-    // Display the range info message in vertical orientation when no error
-    return (
-      <StatusMessage status="help">
-        {t('Choose numbers between %(min)s and %(max)s', { min, max })};
-      </StatusMessage>
-    );
-  }, [error, min, max]);
 
-  // Info/Error tooltip component for horizontal orientation - always shown
+    if (enableSingleValue !== undefined && metadataText) {
+      return { message: metadataText, status: 'help' };
+    }
+
+    return { message: defaultMessage, status: 'help' };
+  }, [error, min, max, enableSingleValue, metadataText, t]);
+
+  // Create UI components that use the message
+  const MessageDisplay = useCallback(() => {
+    const { message, status } = getMessageAndStatus();
+
+    // Different rendering based on orientation
+    if (filterBarOrientation === FilterBarOrientation.Vertical) {
+      return <StatusMessage status={status}>{message}</StatusMessage>;
+    }
+
+    return null;
+  }, [getMessageAndStatus, filterBarOrientation]);
+
   const InfoTooltip = useCallback(() => {
-    const tooltipMessage =
-      error || t('Choose numbers between %(min)s and %(max)s', { min, max });
+    const { message, status } = getMessageAndStatus();
 
     return (
       <ErrorIconWrapper>
-        <Tooltip title={tooltipMessage} placement="top">
-          {error ? (
+        <Tooltip title={message} placement="top">
+          {status === 'error' ? (
             <Icons.ExclamationCircleOutlined iconSize="m" iconColor="error" />
           ) : (
             <Icons.InfoCircleOutlined iconSize="m" iconColor="primary" />
@@ -466,7 +489,7 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
         </Tooltip>
       </ErrorIconWrapper>
     );
-  }, [error, min, max]);
+  }, [getMessageAndStatus]);
 
   useEffect(() => {
     if (enableSingleValue !== undefined) {
@@ -502,8 +525,16 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       <Slider
         min={min}
         max={max}
-        range
-        value={Array.isArray(sliderValue) ? sliderValue : [min, sliderValue]}
+        range={enableSingleValue === undefined}
+        value={
+          enableSingleValue !== undefined
+            ? Array.isArray(sliderValue)
+              ? sliderValue[0]
+              : sliderValue
+            : Array.isArray(sliderValue)
+              ? sliderValue
+              : [min, sliderValue]
+        }
         onChange={handleSliderChange}
         tooltip={{
           formatter: val => (val !== null ? numberFormatter(val) : ''),
@@ -523,26 +554,33 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       onMouseDown={() => setFilterActive(true)}
       onMouseUp={() => setFilterActive(false)}
     >
-      {/* Always show both input fields for range mode */}
-      <InputNumber
-        value={inputValue[minIndex]}
-        onChange={val => handleChange(val, minIndex)}
-        placeholder={`${min}`}
-        style={{ width: '100%' }}
-        status={filterState.validateStatus}
-        data-test="range-filter-from-input"
-      />
-
-      <StyledDivider>-</StyledDivider>
+      {/* Conditionally render based on enableSingleValue */}
+      {(enableSingleValue === undefined ||
+        enableSingleValue === SingleValueType.Minimum ||
+        enableSingleValue === SingleValueType.Exact) && (
+        <InputNumber
+          value={inputValue[minIndex]}
+          onChange={val => handleChange(val, minIndex)}
+          placeholder={`${min}`}
+          style={{ width: '100%' }}
+          status={filterState.validateStatus}
+          data-test="range-filter-from-input"
+        />
+      )}
 
-      <InputNumber
-        value={inputValue[maxIndex]}
-        onChange={val => handleChange(val, maxIndex)}
-        placeholder={`${max}`}
-        style={{ width: '100%' }}
-        data-test="range-filter-to-input"
-        status={filterState.validateStatus}
-      />
+      {enableSingleValue === undefined && <StyledDivider>-</StyledDivider>}
+
+      {(enableSingleValue === undefined ||
+        enableSingleValue === SingleValueType.Maximum) && (
+        <InputNumber
+          value={inputValue[maxIndex]}
+          onChange={val => handleChange(val, maxIndex)}
+          placeholder={`${max}`}
+          style={{ width: '100%' }}
+          data-test="range-filter-to-input"
+          status={filterState.validateStatus}
+        />
+      )}
     </Wrapper>
   );
 
@@ -553,11 +591,6 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       ) : (
         <StyledFormItem
           aria-labelledby={`filter-name-${formData.nativeFilterId}`}
-          extra={
-            filterBarOrientation === FilterBarOrientation.Vertical
-              ? verticalErrorDisplay
-              : undefined
-          }
         >
           {filterBarOrientation === FilterBarOrientation.Horizontal ? (
             <HorizontalLayout>
@@ -583,11 +616,10 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
               {(rangeDisplayMode === RangeDisplayMode.Input ||
                 rangeDisplayMode === RangeDisplayMode.SliderAndInput) &&
                 renderInputs()}
+
+              <MessageDisplay />
             </>
           )}
-          {!filterState.validateStatus && metadataText && (
-            <Metadata value={metadataText} />
-          )}
         </StyledFormItem>
       )}
     </FilterPluginStyle>

From 978a627cfb02da6aa3a3dbfe97aedc5af8fa0f3e Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Wed, 30 Apr 2025 16:33:38 +0100
Subject: [PATCH 09/21] fixes for styled divs

---
 .../components/Range/RangeFilterPlugin.tsx    | 168 +++++++++---------
 1 file changed, 87 insertions(+), 81 deletions(-)

diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index b80bd6e055ea..1de26a8a0d95 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -24,12 +24,12 @@ import {
   NumberFormats,
   styled,
   t,
+  useTheme,
 } from '@superset-ui/core';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { InputNumber } from 'src/components/Input';
 import Slider from 'src/components/Slider';
 import { FilterBarOrientation } from 'src/dashboard/types';
-import Metadata from 'src/components/Metadata';
 import { isNumber } from 'lodash';
 import { Tooltip } from 'src/components/Tooltip';
 import { Icons } from 'src/components/Icons';
@@ -42,11 +42,13 @@ type InputValue = number | null;
 type RangeValue = [InputValue, InputValue];
 
 const StyledDivider = styled.span`
-  margin: 0 ${({ theme }) => theme.gridUnit * 3}px;
-  color: ${({ theme }) => theme.colors.grayscale.light1};
-  font-weight: ${({ theme }) => theme.typography.weights.bold};
-  font-size: ${({ theme }) => theme.typography.sizes.m}px;
-  align-content: center;
+  ${({ theme }) => `
+    margin: 0 ${theme.gridUnit * 3}px;
+    color: ${theme.colors.grayscale.light1};
+    font-weight: ${theme.typography.weights.bold};
+    font-size: ${theme.typography.sizes.m}px;
+    align-content: center;
+  `}
 `;
 
 const Wrapper = styled.div`
@@ -62,53 +64,51 @@ const Wrapper = styled.div`
 `;
 
 const SliderWrapper = styled.div`
-  margin: ${({ theme }) => theme.gridUnit * 4}px 0;
-  padding: 0 ${({ theme }) => theme.gridUnit}px;
-  width: 100%;
-  min-width: 200px;
-`;
-
-const ErrorIconWrapper = styled.div`
-  margin-right: ${({ theme }) => theme.gridUnit * 2}px;
-  display: flex;
-  align-items: center;
+  ${({ theme }) => `
+    margin: ${theme.gridUnit * 4}px 0;
+    padding: 0 ${theme.gridUnit}px;
+    width: 100%;
+    min-width: 200px;
+  `}
 `;
 
 const HorizontalLayout = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme }) => theme.gridUnit * 4}px;
-  width: 100%;
-
-  .controls-container {
+  ${({ theme }) => `
     display: flex;
-    align-items: center;
-    gap: ${({ theme }) => theme.gridUnit * 4}px;
+    flex-direction: column;
+    gap: ${theme.gridUnit * 4}px;
     width: 100%;
 
-    .slider-wrapper {
+    .controls-container {
       display: flex;
       align-items: center;
-      flex: 2;
-    }
+      gap: ${theme.gridUnit * 4}px;
+      width: 100%;
 
-    .slider-container {
-      flex: 1;
-      min-width: 180px;
-    }
+      .slider-wrapper {
+        display: flex;
+        align-items: center;
+        flex: 2;
+      }
 
-    .inputs-container {
-      flex: 1;
-      min-width: 200px;
-      max-width: 300px;
+      .slider-container {
+        flex: 1;
+        min-width: 180px;
+      }
+
+      .inputs-container {
+        flex: 1;
+        min-width: 200px;
+        max-width: 300px;
+      }
     }
-  }
 
-  .message-container {
-    width: 100%;
-    text-align: center;
-    padding-top: ${({ theme }) => theme.gridUnit * 2}px;
-  }
+    .message-container {
+      width: 100%;
+      text-align: center;
+      padding-top: ${theme.gridUnit * 2}px;
+    }
+  `}
 `;
 
 const numberFormatter = getNumberFormatter(NumberFormats.SMART_NUMBER);
@@ -209,6 +209,7 @@ const validateRange = (
 };
 
 export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
+  const theme = useTheme();
   const {
     data,
     formData,
@@ -413,7 +414,6 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       let newInputValue: RangeValue;
 
       if (enableSingleValue !== undefined) {
-        // Single value mode - value is a number
         const singleValue =
           typeof value === 'number'
             ? value
@@ -444,8 +444,6 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
     [min, max, enableSingleValue, updateDataMaskValue],
   );
 
-  // First, create a shared function to determine the message and status
-  // First, create a shared function to determine the message and status
   const getMessageAndStatus = useCallback(() => {
     const defaultMessage = t('Choose numbers between %(min)s and %(max)s', {
       min,
@@ -453,21 +451,19 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
     });
 
     if (error) {
-      return { message: error, status: 'error' };
+      return { message: error, status: 'error' as const };
     }
 
     if (enableSingleValue !== undefined && metadataText) {
-      return { message: metadataText, status: 'help' };
+      return { message: metadataText, status: 'help' as const };
     }
 
-    return { message: defaultMessage, status: 'help' };
-  }, [error, min, max, enableSingleValue, metadataText, t]);
+    return { message: defaultMessage, status: 'help' as const };
+  }, [error, min, max, enableSingleValue, metadataText]);
 
-  // Create UI components that use the message
   const MessageDisplay = useCallback(() => {
     const { message, status } = getMessageAndStatus();
 
-    // Different rendering based on orientation
     if (filterBarOrientation === FilterBarOrientation.Vertical) {
       return <StatusMessage status={status}>{message}</StatusMessage>;
     }
@@ -479,15 +475,16 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
     const { message, status } = getMessageAndStatus();
 
     return (
-      <ErrorIconWrapper>
-        <Tooltip title={message} placement="top">
-          {status === 'error' ? (
-            <Icons.ExclamationCircleOutlined iconSize="m" iconColor="error" />
-          ) : (
-            <Icons.InfoCircleOutlined iconSize="m" iconColor="primary" />
-          )}
-        </Tooltip>
-      </ErrorIconWrapper>
+      <Tooltip title={message} placement="top">
+        <Icons.InfoCircleOutlined
+          iconSize="m"
+          iconColor={
+            status === 'error'
+              ? theme.colors.error.base
+              : theme.colors.grayscale.base
+          }
+        />
+      </Tooltip>
     );
   }, [getMessageAndStatus]);
 
@@ -520,28 +517,37 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
     });
   }, [enableSingleValue]);
 
-  const renderSlider = () => (
-    <SliderWrapper>
-      <Slider
-        min={min}
-        max={max}
-        range={enableSingleValue === undefined}
-        value={
-          enableSingleValue !== undefined
-            ? Array.isArray(sliderValue)
-              ? sliderValue[0]
-              : sliderValue
-            : Array.isArray(sliderValue)
-              ? sliderValue
-              : [min, sliderValue]
-        }
-        onChange={handleSliderChange}
-        tooltip={{
-          formatter: val => (val !== null ? numberFormatter(val) : ''),
-        }}
-      />
-    </SliderWrapper>
-  );
+  const renderSlider = () => {
+    if (enableSingleValue !== undefined) {
+      return (
+        <SliderWrapper>
+          <Slider
+            min={min}
+            max={max}
+            value={Array.isArray(sliderValue) ? sliderValue[0] : sliderValue}
+            onChange={handleSliderChange}
+            tooltip={{
+              formatter: val => (val !== null ? numberFormatter(val) : ''),
+            }}
+          />
+        </SliderWrapper>
+      );
+    }
+    return (
+      <SliderWrapper>
+        <Slider
+          min={min}
+          max={max}
+          range
+          value={Array.isArray(sliderValue) ? sliderValue : [min, sliderValue]}
+          onChange={handleSliderChange}
+          tooltip={{
+            formatter: val => (val !== null ? numberFormatter(val) : ''),
+          }}
+        />
+      </SliderWrapper>
+    );
+  };
 
   const renderInputs = () => (
     <Wrapper

From 45d0102fc53b7920bc45fbf947508edb66ffa560 Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Wed, 30 Apr 2025 17:22:46 +0100
Subject: [PATCH 10/21] single value test update

---
 .../filters/components/Range/RangeFilterPlugin.test.tsx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
index ba89bfac0e4f..655c60d11d1e 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
@@ -196,7 +196,7 @@ describe('RangeFilterPlugin', () => {
     });
 
     const inputs = screen.getAllByRole('spinbutton');
-    expect(inputs).toHaveLength(2);
+    expect(inputs).toHaveLength(1);
     expect(inputs[0]).toHaveValue('20');
   });
 
@@ -226,8 +226,8 @@ describe('RangeFilterPlugin', () => {
     });
 
     const inputs = screen.getAllByRole('spinbutton');
-    expect(inputs).toHaveLength(2);
-    expect(inputs[1]).toHaveValue('60');
+    expect(inputs).toHaveLength(1);
+    expect(inputs[0]).toHaveValue('60');
   });
 
   it('should call setDataMask with correct exact filter', () => {
@@ -256,7 +256,7 @@ describe('RangeFilterPlugin', () => {
     });
 
     const inputs = screen.getAllByRole('spinbutton');
-    expect(inputs).toHaveLength(2);
+    expect(inputs).toHaveLength(1);
     expect(inputs[0]).toHaveValue('10');
   });
 

From fa16d5647ca75f66fba10ea8cad7436d37630eca Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Fri, 2 May 2025 12:20:22 +0100
Subject: [PATCH 11/21] Fix range filter validation logic for required values

---
 .../src/filters/components/Range/RangeFilterPlugin.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index 1de26a8a0d95..cdb092b3ada6 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -157,7 +157,7 @@ const validateRange = (
       enableSingleValue === SingleValueType.Exact;
     const value = isSingleMin ? inputMin : inputMax;
 
-    if (!isNumber(value) && !enableEmptyFilter) {
+    if (!isNumber(value) && enableEmptyFilter) {
       return { isValid: false, errorMessage: requiredError };
     }
 

From e7edc764ae9bdb333f977b177da7004d51ff676d Mon Sep 17 00:00:00 2001
From: Geido <60598000+geido@users.noreply.github.com>
Date: Tue, 22 Apr 2025 17:32:30 +0300
Subject: [PATCH 12/21] fix(Native Filters): Keep default filter values when
 configuring creatable behavior (#33205)


From bc2ca68cfd5c3e8cf936d2e4d826cd1a83ab688a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 29 Apr 2025 08:26:40 -0700
Subject: [PATCH 13/21] =?UTF-8?q?chore(=F0=9F=A6=BE):=20bump=20python=20pa?=
 =?UTF-8?q?ndas=20subpackage(s)=20(#33263)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: GitHub Action <action@github.com>

From effabe299684652f478142dc3fcf27184832cbb9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 29 Apr 2025 08:27:25 -0700
Subject: [PATCH 14/21] =?UTF-8?q?chore(=F0=9F=A6=BE):=20bump=20python=20de?=
 =?UTF-8?q?precation=20subpackage(s)=20(#33260)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: GitHub Action <action@github.com>

From 16bdd74d43ddb30c852ea24565840732d88d65da Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 29 Apr 2025 08:27:48 -0700
Subject: [PATCH 15/21] =?UTF-8?q?chore(=F0=9F=A6=BE):=20bump=20python=20pa?=
 =?UTF-8?q?ckaging=2024.2=20->=2025.0=20(#33259)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: GitHub Action <action@github.com>

From de6a501b43e673bd23d72033a4cf40412e4a4be2 Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Fri, 2 May 2025 13:13:32 +0100
Subject: [PATCH 16/21] removed un-needed comment

---
 .../src/filters/components/Range/RangeFilterPlugin.tsx         | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index cdb092b3ada6..9d7c4b3c7007 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -310,7 +310,6 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       return;
     }
 
-    // Handle error case
     if (filterState.validateStatus === 'error') {
       setError(filterState.validateMessage);
 
@@ -426,11 +425,9 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
         } else if (enableSingleValue === SingleValueType.Maximum) {
           newInputValue = [null, singleValue];
         } else {
-          // Exact - use the same value for both
           newInputValue = [singleValue, singleValue];
         }
       } else {
-        // Regular range case - value is an array
         const arrayValue = Array.isArray(value) ? value : [min, max];
         const [sliderMin, sliderMax] =
           arrayValue.length >= 2 ? [arrayValue[0], arrayValue[1]] : [min, max];

From 6c3e611ab8955c1f00be5687814fc5369256e806 Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Mon, 5 May 2025 23:03:01 +0100
Subject: [PATCH 17/21] use min/max as base value for increment/decrememt

---
 .../components/Range/RangeFilterPlugin.tsx       | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index 9d7c4b3c7007..2ada19d4e8eb 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -372,10 +372,22 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       if (row?.min === undefined && row?.max === undefined) {
         return;
       }
+
+      // When using increment/decrement buttons on an empty input,
+      // use the dataset min/max as the base value
+      let adjustedValue = newValue;
+      if (newValue !== null && inputValue[index] === null) {
+        if (index === minIndex) {
+          adjustedValue = min + (newValue === 1 ? 1 : -1);
+        } else if (index === maxIndex) {
+          adjustedValue = max + (newValue === 1 ? 1 : -1);
+        }
+      }
+
       const newInputValue: [number | null, number | null] =
         index === minIndex
-          ? [newValue, inputValue[maxIndex]]
-          : [inputValue[minIndex], newValue];
+          ? [adjustedValue, inputValue[maxIndex]]
+          : [inputValue[minIndex], adjustedValue];
 
       setInputValue(newInputValue);
 

From ea3361d81bd3ba2f59b0bf4710e49eb7f38e717b Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Tue, 6 May 2025 16:38:38 +0100
Subject: [PATCH 18/21] CI fix

---
 .../Range/RangeFilterPlugin.test.tsx          |  2 +-
 .../components/Range/RangeFilterPlugin.tsx    | 32 +++++++++----------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
index 655c60d11d1e..6cd53f52c498 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
@@ -136,7 +136,7 @@ describe('RangeFilterPlugin', () => {
       extraFormData: {},
       filterState: {
         label: '',
-        validateMessage: 'Min value cannot be greater than max value',
+        validateMessage: 'Numbers must be within 10 and 100',
         validateStatus: 'error',
         value: null,
       },
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index 2ada19d4e8eb..81e849ea96c9 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -182,29 +182,25 @@ const validateRange = (
     };
   }
 
-  // Check individual value bounds if provided
-  if (inputMin !== null && (inputMin < min || inputMin > max)) {
+  // Check relationship between min and max when both are provided
+  if (inputMin !== null && inputMax !== null && inputMin > inputMax) {
     return {
       isValid: false,
-      errorMessage: rangeError,
+      errorMessage: t('Min value cannot be greater than max value'),
     };
   }
 
-  if (inputMax !== null && (inputMax < min || inputMax > max)) {
+  //   Check individual value bounds if provided
+  if (
+    (inputMin !== null && inputMin < min) ||
+    (inputMax !== null && inputMax > max)
+  ) {
     return {
       isValid: false,
       errorMessage: rangeError,
     };
   }
 
-  // Check relationship between min and max when both are provided
-  if (inputMin !== null && inputMax !== null && inputMin > inputMax) {
-    return {
-      isValid: false,
-      errorMessage: t('Min value cannot be greater than max value'),
-    };
-  }
-
   return { isValid: true, errorMessage: null };
 };
 
@@ -377,10 +373,14 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       // use the dataset min/max as the base value
       let adjustedValue = newValue;
       if (newValue !== null && inputValue[index] === null) {
-        if (index === minIndex) {
-          adjustedValue = min + (newValue === 1 ? 1 : -1);
-        } else if (index === maxIndex) {
-          adjustedValue = max + (newValue === 1 ? 1 : -1);
+        if (index === minIndex && newValue === 1) {
+          adjustedValue = min + 1;
+        } else if (index === minIndex && newValue === -1) {
+          adjustedValue = min - 1;
+        } else if (index === maxIndex && newValue === 1) {
+          adjustedValue = max + 1;
+        } else if (index === maxIndex && newValue === -1) {
+          adjustedValue = max - 1;
         }
       }
 

From 6ae0e460512d1f2fd0a929d3ac12e0ae416fc359 Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Thu, 8 May 2025 14:46:46 +0100
Subject: [PATCH 19/21] review fixes

---
 .../FilterControls/FilterControl.tsx          |  2 +-
 .../components/Range/RangeFilterPlugin.tsx    | 24 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index 76a162e7c589..513431641cba 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -154,7 +154,7 @@ const HorizontalFormItem = styled(StyledFormItem)<{
   }
 
   .ant-form-item-control {
-    width: ${({ inverseSelection }) => (inverseSelection ? 252 : 164)}px;
+    min-width: ${({ inverseSelection }) => (inverseSelection ? 252 : 164)}px;
   }
 
   .select-container {
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index 81e849ea96c9..1b393b85ead7 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -57,7 +57,6 @@ const Wrapper = styled.div`
   width: 100%;
 
   .antd5-input-number {
-    width: 100%;
     min-width: 80px;
     position: relative;
   }
@@ -97,10 +96,10 @@ const HorizontalLayout = styled.div`
       }
 
       .inputs-container {
-        flex: 1;
-        min-width: 200px;
-        max-width: 300px;
+        min-width: 160px;
+        max-width: 200px;
       }
+
     }
 
     .message-container {
@@ -144,7 +143,8 @@ const validateRange = (
   enableSingleValue?: SingleValueType,
 ): { isValid: boolean; errorMessage: string | null } => {
   const [inputMin, inputMax] = values;
-  const requiredError = t('Filter value is required');
+  const requiredError = t('Please provide a valid min or max value');
+  const minMaxError = t('Min value cannot be greater than max value');
   const rangeError = t('Numbers must be within %(min)s and %(max)s', {
     min,
     max,
@@ -157,7 +157,7 @@ const validateRange = (
       enableSingleValue === SingleValueType.Exact;
     const value = isSingleMin ? inputMin : inputMax;
 
-    if (!isNumber(value) && enableEmptyFilter) {
+    if (!isNumber(value)) {
       return { isValid: false, errorMessage: requiredError };
     }
 
@@ -178,7 +178,7 @@ const validateRange = (
   if (enableEmptyFilter && inputMin === null && inputMax === null) {
     return {
       isValid: false,
-      errorMessage: t('Please provide a valid min or max value'),
+      errorMessage: requiredError,
     };
   }
 
@@ -186,7 +186,7 @@ const validateRange = (
   if (inputMin !== null && inputMax !== null && inputMin > inputMax) {
     return {
       isValid: false,
-      errorMessage: t('Min value cannot be greater than max value'),
+      errorMessage: minMaxError,
     };
   }
 
@@ -249,15 +249,15 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
     const [inputMin, inputMax] = inputValue;
 
     // For single value filters
-    if (enableSingleValue === SingleValueType.Minimum) {
+    if (
+      enableSingleValue === SingleValueType.Minimum ||
+      enableSingleValue === SingleValueType.Exact
+    ) {
       return inputMin !== null ? inputMin : min;
     }
     if (enableSingleValue === SingleValueType.Maximum) {
       return inputMax !== null ? inputMax : max;
     }
-    if (enableSingleValue === SingleValueType.Exact) {
-      return inputMin !== null ? inputMin : (min + max) / 2;
-    }
 
     // For range filters - use placeholders when values are null
     // If only min is provided, set max to the dataset max

From 6a85928c24708b527db54b28785216e484fc753e Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Sat, 10 May 2025 16:21:47 +0100
Subject: [PATCH 20/21] fix for typed input defaulting to min/max value

---
 .../components/Range/RangeFilterPlugin.tsx        | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index 1b393b85ead7..ef93975d89a0 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -26,7 +26,7 @@ import {
   t,
   useTheme,
 } from '@superset-ui/core';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import { InputNumber } from 'src/components/Input';
 import Slider from 'src/components/Slider';
 import { FilterBarOrientation } from 'src/dashboard/types';
@@ -363,6 +363,12 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
     }
   }, [enableSingleValue]);
 
+  const keyPressed = useRef(false);
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    keyPressed.current = !!/^[0-9]$/.test(event.key);
+  };
+
   const handleChange = useCallback(
     (newValue: number | null, index: 0 | 1) => {
       if (row?.min === undefined && row?.max === undefined) {
@@ -373,7 +379,10 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
       // use the dataset min/max as the base value
       let adjustedValue = newValue;
       if (newValue !== null && inputValue[index] === null) {
-        if (index === minIndex && newValue === 1) {
+        if (keyPressed.current) {
+          adjustedValue = newValue;
+          keyPressed.current = false;
+        } else if (index === minIndex && newValue === 1) {
           adjustedValue = min + 1;
         } else if (index === minIndex && newValue === -1) {
           adjustedValue = min - 1;
@@ -576,6 +585,7 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
         <InputNumber
           value={inputValue[minIndex]}
           onChange={val => handleChange(val, minIndex)}
+          onKeyDown={handleKeyDown}
           placeholder={`${min}`}
           style={{ width: '100%' }}
           status={filterState.validateStatus}
@@ -590,6 +600,7 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
         <InputNumber
           value={inputValue[maxIndex]}
           onChange={val => handleChange(val, maxIndex)}
+          onKeyDown={handleKeyDown}
           placeholder={`${max}`}
           style={{ width: '100%' }}
           data-test="range-filter-to-input"

From 6d9c393981a894c1d21ea3a25cd8579fd1ebabed Mon Sep 17 00:00:00 2001
From: payose <inipayose@gmail.com>
Date: Fri, 16 May 2025 08:21:44 +0100
Subject: [PATCH 21/21] fix for overlapping filter items in horizontal
 orientation

---
 .../components/DropdownContainer/index.tsx    | 21 +++++++++++++++++-
 .../components/Range/RangeFilterPlugin.tsx    | 22 +++++++++----------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/superset-frontend/src/components/DropdownContainer/index.tsx b/superset-frontend/src/components/DropdownContainer/index.tsx
index 908e79ed8dee..aea07a74a8ee 100644
--- a/superset-frontend/src/components/DropdownContainer/index.tsx
+++ b/superset-frontend/src/components/DropdownContainer/index.tsx
@@ -252,9 +252,11 @@ const DropdownContainer = forwardRef(
             ? items.length - overflowedItems.length
             : index;
 
+        // After determining overflow index, check if the last visible item overlaps with dropdown button
+
+        const button = current?.children.item(1);
         if (width > previousWidth) {
           // Calculates remaining space in the container
-          const button = current?.children.item(1);
           const buttonRight = button?.getBoundingClientRect().right || 0;
           const containerRight = current?.getBoundingClientRect().right || 0;
           const remainingSpace = containerRight - buttonRight;
@@ -271,6 +273,23 @@ const DropdownContainer = forwardRef(
           }
         }
 
+        // Check if the last visible item would overlap with the dropdown button
+        if (
+          button &&
+          newOverflowingIndex > 0 &&
+          childrenArray[newOverflowingIndex - 1]
+        ) {
+          const lastVisibleItem = childrenArray[newOverflowingIndex - 1];
+          const lastItemRect = lastVisibleItem.getBoundingClientRect();
+          const buttonRect = button.getBoundingClientRect();
+
+          // If the gap between last item and button is less than 16px, or there's an overlap,
+          // move the last item to the dropdown
+          const minimumGap = 16; // pixels
+          if (buttonRect.left - lastItemRect.right < minimumGap) {
+            newOverflowingIndex = Math.max(0, newOverflowingIndex - 1);
+          }
+        }
         setOverflowingIndex(newOverflowingIndex);
       }
     }, [
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index ef93975d89a0..6c418f8fee2a 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -55,11 +55,6 @@ const Wrapper = styled.div`
   display: flex;
   justify-content: space-between;
   width: 100%;
-
-  .antd5-input-number {
-    min-width: 80px;
-    position: relative;
-  }
 `;
 
 const SliderWrapper = styled.div`
@@ -67,7 +62,7 @@ const SliderWrapper = styled.div`
     margin: ${theme.gridUnit * 4}px 0;
     padding: 0 ${theme.gridUnit}px;
     width: 100%;
-    min-width: 200px;
+    min-width: 120px;
   `}
 `;
 
@@ -96,8 +91,8 @@ const HorizontalLayout = styled.div`
       }
 
       .inputs-container {
-        min-width: 160px;
-        max-width: 200px;
+        min-width: 140px;
+        max-width: 180px;
       }
 
     }
@@ -220,6 +215,7 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
     filterState,
     inputRef,
     filterBarOrientation = FilterBarOrientation.Vertical,
+    isOverflowingFilterBar = false,
   } = props;
 
   const [row] = data;
@@ -482,12 +478,15 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
   const MessageDisplay = useCallback(() => {
     const { message, status } = getMessageAndStatus();
 
-    if (filterBarOrientation === FilterBarOrientation.Vertical) {
+    if (
+      filterBarOrientation === FilterBarOrientation.Vertical ||
+      isOverflowingFilterBar
+    ) {
       return <StatusMessage status={status}>{message}</StatusMessage>;
     }
 
     return null;
-  }, [getMessageAndStatus, filterBarOrientation]);
+  }, [getMessageAndStatus, filterBarOrientation, isOverflowingFilterBar]);
 
   const InfoTooltip = useCallback(() => {
     const { message, status } = getMessageAndStatus();
@@ -618,7 +617,8 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) {
         <StyledFormItem
           aria-labelledby={`filter-name-${formData.nativeFilterId}`}
         >
-          {filterBarOrientation === FilterBarOrientation.Horizontal ? (
+          {filterBarOrientation === FilterBarOrientation.Horizontal &&
+          !isOverflowingFilterBar ? (
             <HorizontalLayout>
               <div className="controls-container">
                 <InfoTooltip />