diff --git a/web/client/components/widgets/builder/wizard/FilterWizard.jsx b/web/client/components/widgets/builder/wizard/FilterWizard.jsx
index 51459e41c0a..2a14013a0f9 100644
--- a/web/client/components/widgets/builder/wizard/FilterWizard.jsx
+++ b/web/client/components/widgets/builder/wizard/FilterWizard.jsx
@@ -57,6 +57,7 @@ const isFilterConfigValid = (editorData = {}) => {
 const FilterWizard = ({
     filterData = {},
     editorData = {},
+    selectableItems = [],
     onChange = () => {},
     onOpenLayerSelector = () => {},
     openFilterEditor = () => {},
@@ -74,7 +75,8 @@ const FilterWizard = ({
     onAddFilter = () => {},
     onDeleteFilter = () => {},
     onRenameFilter = () => {},
-    onSelectionChange = () => {}
+    onSelectionChange = () => {},
+    onSelectableItemsChange = () => {}
 }) => {
     const [activeTab, setActiveTab] = useState('data');
 
@@ -94,7 +96,7 @@ const FilterWizard = ({
 
     const tabContents = {
         data: <FilterDataTab data={filterData} onChange={onChange} onOpenLayerSelector={onOpenLayerSelector} openFilterEditor={openFilterEditor} onEditorChange={onEditorChange} dashBoardEditing={dashBoardEditing} selections={selections} />,
-        layout: <FilterLayoutTab data={filterData} onChange={onChange} selections={selections} onEditorChange={onEditorChange}  />,
+        layout: <FilterLayoutTab data={filterData} onChange={onChange} selections={selections} onEditorChange={onEditorChange} selectableItems={selectableItems}  />,
         actions: <FilterActionsTab data={filterData} onChange={onChange} onEditorChange={onEditorChange}  />
     };
 
@@ -108,6 +110,7 @@ const FilterWizard = ({
                     selections={selections}
                     getSelectionHandler={onSelectionChange}
                     selectedFilterId={selectedFilterId}
+                    onSelectableItemsChange={onSelectableItemsChange}
                 />
             </div>
             <FilterSelector
@@ -176,4 +179,3 @@ const FilterWizard = ({
 };
 
 export default FilterWizard;
-
diff --git a/web/client/components/widgets/builder/wizard/filter/FilterCheckboxList.jsx b/web/client/components/widgets/builder/wizard/filter/FilterCheckboxList.jsx
index b6630ae44b5..db9dacbf4b6 100644
--- a/web/client/components/widgets/builder/wizard/filter/FilterCheckboxList.jsx
+++ b/web/client/components/widgets/builder/wizard/filter/FilterCheckboxList.jsx
@@ -47,8 +47,9 @@ const FilterCheckboxList = ({
     return (
         <FormGroup className="ms-filter-checkbox-list">
             <div className={containerClassName} style={containerStyle}>
-                {items.map(({ id, label, description, disabled }) => (
+                {items.map(({ id, label, description, disabled }, index) => (
                     <ControlComponent
+                        key={`${id}-${index}`}
                         inline={isInline}
                         checked={selectedValues.includes(id)}
                         onChange={() => handleToggle(id)}
@@ -85,4 +86,3 @@ FilterCheckboxList.propTypes = {
 
 export default FilterCheckboxList;
 
-
diff --git a/web/client/components/widgets/builder/wizard/filter/FilterChipList.jsx b/web/client/components/widgets/builder/wizard/filter/FilterChipList.jsx
index 980d7b49e9c..79eff894d62 100644
--- a/web/client/components/widgets/builder/wizard/filter/FilterChipList.jsx
+++ b/web/client/components/widgets/builder/wizard/filter/FilterChipList.jsx
@@ -70,11 +70,11 @@ const FilterChipList = ({
                 className="ms-filter-chip-list-items"
                 style={listStyle}
             >
-                {items.map(({ id, label, disabled }) => {
+                {items.map(({ id, label, disabled }, index) => {
                     const active = selectedValues.includes(id);
                     return (
                         <Text
-                            key={id}
+                            key={`${id}-${index}`}
                             component="li"
                             fontSize="sm"
                             role={isSingle ? 'radio' : 'checkbox'}
@@ -110,4 +110,3 @@ FilterChipList.propTypes = {
 
 export default FilterChipList;
 
-
diff --git a/web/client/components/widgets/builder/wizard/filter/FilterDataTab/components/AttributeSelector.jsx b/web/client/components/widgets/builder/wizard/filter/FilterDataTab/components/AttributeSelector.jsx
index 2e5932c96a9..0548d17438e 100644
--- a/web/client/components/widgets/builder/wizard/filter/FilterDataTab/components/AttributeSelector.jsx
+++ b/web/client/components/widgets/builder/wizard/filter/FilterDataTab/components/AttributeSelector.jsx
@@ -65,7 +65,8 @@ AttributeSelector.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     options: PropTypes.arrayOf(PropTypes.shape({
         value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        label: PropTypes.string
+        label: PropTypes.string,
+        type: PropTypes.string
     })),
     onChange: PropTypes.func,
     placeholder: PropTypes.string,
@@ -77,4 +78,3 @@ AttributeSelector.propTypes = {
 };
 
 export default AttributeSelector;
-
diff --git a/web/client/components/widgets/builder/wizard/filter/FilterDataTab/components/FilterAttributesSection.jsx b/web/client/components/widgets/builder/wizard/filter/FilterDataTab/components/FilterAttributesSection.jsx
index 231797fa5e2..0c1755ed67a 100644
--- a/web/client/components/widgets/builder/wizard/filter/FilterDataTab/components/FilterAttributesSection.jsx
+++ b/web/client/components/widgets/builder/wizard/filter/FilterDataTab/components/FilterAttributesSection.jsx
@@ -56,11 +56,11 @@ const FilterAttributesSection = ({
     const isAttributeDisabled = !attributeOptions.length && !isLoading;
 
     const handleValueAttributeChange = (option) => {
-        onValueAttributeChange(option?.value);
+        onValueAttributeChange(option);
     };
 
     const handleLabelAttributeChange = (option) => {
-        onLabelAttributeChange(option?.value);
+        onLabelAttributeChange(option);
     };
 
     const handleSortByAttributeChange = (option) => {
@@ -153,4 +153,3 @@ FilterAttributesSection.propTypes = {
 };
 
 export default FilterAttributesSection;
-
diff --git a/web/client/components/widgets/builder/wizard/filter/FilterDataTab/hooks/useFilterData.js b/web/client/components/widgets/builder/wizard/filter/FilterDataTab/hooks/useFilterData.js
index ecb41bce5ba..a1440a8a4e9 100644
--- a/web/client/components/widgets/builder/wizard/filter/FilterDataTab/hooks/useFilterData.js
+++ b/web/client/components/widgets/builder/wizard/filter/FilterDataTab/hooks/useFilterData.js
@@ -80,7 +80,9 @@ export const useFilterData = (data = {}) => {
 
         // Attributes
         const valueAttribute = filterData.valueAttribute ?? null;
+        const valueAttributeType = filterData.valueAttributeType ?? null;
         const labelAttribute = filterData.labelAttribute ?? null;
+        const labelAttributeType = filterData.labelAttributeType ?? null;
         const sortByAttribute = filterData.sortByAttribute ?? null;
         const sortOrder = filterData.sortOrder;
 
@@ -111,7 +113,9 @@ export const useFilterData = (data = {}) => {
 
             // Attributes
             valueAttribute,
+            valueAttributeType,
             labelAttribute,
+            labelAttributeType,
             sortByAttribute,
             sortOrder,
 
@@ -128,4 +132,3 @@ export const useFilterData = (data = {}) => {
         };
     }, [data]);
 };
-
diff --git a/web/client/components/widgets/builder/wizard/filter/FilterDataTab/hooks/useLayerAttributes.js b/web/client/components/widgets/builder/wizard/filter/FilterDataTab/hooks/useLayerAttributes.js
index 7d7a8f7a266..3d7d998039f 100644
--- a/web/client/components/widgets/builder/wizard/filter/FilterDataTab/hooks/useLayerAttributes.js
+++ b/web/client/components/widgets/builder/wizard/filter/FilterDataTab/hooks/useLayerAttributes.js
@@ -20,7 +20,8 @@ const getLayerKey = (layer, layerId = null) => {
 const mapAttributesToOptions = (attributes = []) => {
     return attributes.map(attribute => ({
         value: attribute.value || attribute.attribute || attribute.name,
-        label: attribute.label || attribute.alias || attribute.value || attribute.attribute || attribute.name
+        label: attribute.label || attribute.alias || attribute.value || attribute.attribute || attribute.name,
+        type: attribute.type
     }));
 };
 
@@ -110,4 +111,3 @@ export const useLayerAttributes = (selectedLayer, hasLayerSelection = false) =>
         error: attributesError
     };
 };
-
diff --git a/web/client/components/widgets/builder/wizard/filter/FilterDataTab/index.jsx b/web/client/components/widgets/builder/wizard/filter/FilterDataTab/index.jsx
index d0be37fddc0..89f73158b35 100644
--- a/web/client/components/widgets/builder/wizard/filter/FilterDataTab/index.jsx
+++ b/web/client/components/widgets/builder/wizard/filter/FilterDataTab/index.jsx
@@ -85,8 +85,17 @@ const FilterDataTab = ({
     }, [onEditorChange]);
 
     // Generic handlers using the factory function
-    const handleValueAttributeChange = createChangeHandler('data.valueAttribute');
-    const handleLabelAttributeChange = createChangeHandler('data.labelAttribute');
+    const handleValueAttributeChange = useCallback((option) => {
+        onChange('data.valueAttribute', option?.value);
+        onChange('data.valueAttributeType', option?.type);
+        if (!filterDataState.labelAttribute) {
+            onChange('data.labelAttributeType', option?.type);
+        }
+    }, [onChange, filterDataState.labelAttribute]);
+    const handleLabelAttributeChange = useCallback((option) => {
+        onChange('data.labelAttribute', option?.value);
+        onChange('data.labelAttributeType', option?.type);
+    }, [onChange]);
     const handleSortByAttributeChange = createChangeHandler('data.sortByAttribute');
     const handleSortOrderChange = createChangeHandler('data.sortOrder');
     const handleMaxFeaturesChange = createChangeHandler('data.maxFeatures');
@@ -207,4 +216,3 @@ FilterDataTab.propTypes = {
 };
 
 export default FilterDataTab;
-
diff --git a/web/client/components/widgets/builder/wizard/filter/FilterLayoutTab.jsx b/web/client/components/widgets/builder/wizard/filter/FilterLayoutTab.jsx
index cacac2aac69..3a30f32dd36 100644
--- a/web/client/components/widgets/builder/wizard/filter/FilterLayoutTab.jsx
+++ b/web/client/components/widgets/builder/wizard/filter/FilterLayoutTab.jsx
@@ -5,8 +5,8 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { useState } from 'react';
-import { FormGroup, ControlLabel, InputGroup, FormControl, Panel, Glyphicon, Collapse, Checkbox } from 'react-bootstrap';
+import React, { useEffect, useRef, useState } from 'react';
+import { FormGroup, ControlLabel, InputGroup, FormControl, Panel, Glyphicon, Collapse, Checkbox, Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import Select from 'react-select';
 import ColorSelector from '../../../../style/ColorSelector';
 import FontAwesomeIconSelector from './FontAwesomeIconSelector/FontAwesomeIconSelector';
@@ -19,6 +19,105 @@ import InfoPopover from '../../../widget/InfoPopover';
 import { USER_DEFINED_TYPES } from './FilterDataTab/constants';
 
 const LocalizedFormControl = localizedProps('placeholder')(FormControl);
+const TICK_INPUT_DEBOUNCE_TIME = 300;
+const normalizeTickAngle = (value) => {
+    const angle = Number(value);
+    if (!Number.isFinite(angle)) {
+        return -90;
+    }
+    return Math.max(-90, Math.min(90, angle));
+};
+
+const TickAngleControl = ({
+    value = -90,
+    onChange = () => {}
+}) => {
+    const normalizedValue = normalizeTickAngle(value);
+    const [inputValue, setInputValue] = useState(String(normalizedValue));
+
+    useEffect(() => {
+        setInputValue(String(normalizedValue));
+    }, [normalizedValue]);
+
+    const commitValue = (nextValue) => {
+        onChange(normalizeTickAngle(nextValue));
+    };
+
+    return (
+        <div className="ms-filter-tick-angle-control">
+            <FormControl
+                className="ms-filter-tick-angle-range"
+                type="range"
+                min={-90}
+                max={90}
+                step={1}
+                value={normalizedValue}
+                onChange={(event) => commitValue(event.target.value)}
+            />
+            <FormControl
+                className="ms-filter-tick-angle-number"
+                type="number"
+                min={-90}
+                max={90}
+                step={1}
+                value={inputValue}
+                onChange={(event) => {
+                    const nextValue = event.target.value;
+                    setInputValue(nextValue);
+                    if (nextValue !== '') {
+                        commitValue(nextValue);
+                    }
+                }}
+                style={{ width: 68, flex: '0 0 68px', textAlign: 'right' }}
+            />
+        </div>
+    );
+};
+
+// Keep typing local and debounced layout update later.
+const DebouncedLocalizedFormControl = ({
+    value = '',
+    onChange = () => {},
+    debounceTime = TICK_INPUT_DEBOUNCE_TIME,
+    ...props
+}) => {
+    const inputValue = value || '';
+    const [localValue, setLocalValue] = useState(inputValue);
+    const committedValue = useRef(inputValue);
+    const onChangeRef = useRef(onChange);
+
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+
+    useEffect(() => {
+        committedValue.current = inputValue;
+        setLocalValue(inputValue);
+    }, [inputValue]);
+
+    useEffect(() => {
+        let timeout;
+        if (localValue !== committedValue.current) {
+            timeout = setTimeout(() => {
+                committedValue.current = localValue;
+                onChangeRef.current(localValue);
+            }, debounceTime);
+        }
+        return () => {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+        };
+    }, [localValue, debounceTime]);
+
+    return (
+        <LocalizedFormControl
+            {...props}
+            value={localValue}
+            onChange={(event) => setLocalValue(event.target.value)}
+        />
+    );
+};
 
 const SELECTION_MODE_OPTIONS = [
     { value: 'multiple', label: 'Multiple', labelKey: 'widgets.filterWidget.multiple' },
@@ -34,11 +133,14 @@ const FilterLayoutTab = ({
     data = {},
     onChange = () => {},
     onEditorChange = () => {},
-    selections = {}
+    selections = {},
+    selectableItems = []
 }) => {
     const layout = data?.layout || {};
+    const filterItems = Array.isArray(selectableItems) ? selectableItems : [];
     const [expandedPanel, setExpandedPanel] = useState("items");
     const isStyleList = data?.data?.userDefinedType === USER_DEFINED_TYPES.STYLE_LIST;
+    const showTickAutofillButton = layout.variant === 'slider';
 
     // Localized options for selection mode
     const selectedSelectionMode = SELECTION_MODE_OPTIONS.find(opt => opt.value === layout.selectionMode);
@@ -53,11 +155,58 @@ const FilterLayoutTab = ({
         DIRECTION_OPTIONS,
         selectedDirection
     );
+    const isSliderVariant = layout.variant === 'slider';
+    const showTicks = layout.showTicks !== false;
+    const tickAngle = normalizeTickAngle(layout.tickAngle);
+    const variantOptions = [
+        { value: 'checkbox', label: 'Checkbox' },
+        { value: 'button', label: 'Button' },
+        { value: 'dropdown', label: 'Dropdown' },
+        { value: 'switch', label: 'Switch' },
+        ...(layout.selectionMode === 'single' ? [{ value: 'slider', label: 'Slider' }] : [])
+    ];
+    const localizedSelectionModeOptionsWithDisabledMultiple = localizedSelectionModeOptions.map(opt => (
+        opt.value === 'multiple' && isSliderVariant
+            ? { ...opt, disabled: true }
+            : opt
+    ));
 
     const handlePanelToggle = (panelName) => {
         setExpandedPanel(expandedPanel === panelName ? null : panelName);
     };
 
+    const handleVariantChange = (val) => {
+        onChange('layout.variant', val?.value);
+        if (val?.value === 'slider') {
+            onChange('layout.selectionMode', 'single');
+            onEditorChange('selections', {
+                ...selections,
+                [data.id]: selections?.[data.id]?.length > 0 ? [selections[data.id][0]] : []
+            });
+        }
+    };
+
+    const handleSelectionModeChange = (val) => {
+        const nextSelectionMode = val?.value;
+        const currentSelections = selections?.[data.id] || [];
+        onChange('layout.selectionMode', nextSelectionMode);
+        onEditorChange('selections', {
+            ...selections,
+            [data.id]: nextSelectionMode === 'single' ? (currentSelections.length > 0 ? [currentSelections[0]] : []) : currentSelections
+        });
+        if (nextSelectionMode !== 'single' && isSliderVariant) {
+            onChange('layout.variant', 'checkbox');
+        }
+    };
+
+    const handleAutofillTickValues = () => {
+        const tickValues = filterItems
+            .map(item => item?.id)
+            .filter(item => item !== undefined && item !== null && item !== '')
+            .join(', ');
+        onChange('layout.tickValues', tickValues);
+    };
+
     return (
         <div className="ms-filter-wizard-layout-tab">
             <Panel
@@ -188,14 +337,9 @@ const FilterLayoutTab = ({
                                     <Select
                                         clearable={false}
                                         value={layout.variant}
-                                        options={[
-                                            { value: 'checkbox', label: 'Checkbox' },
-                                            { value: 'button', label: 'Button' },
-                                            { value: 'dropdown', label: 'Dropdown' },
-                                            { value: 'switch', label: 'Switch' }
-                                        ]}
+                                        options={variantOptions}
                                         placeholder="Select variant..."
-                                        onChange={(val) => onChange('layout.variant', val?.value)}
+                                        onChange={handleVariantChange}
                                     />
                                 </InputGroup>
                             </FormGroup>
@@ -205,18 +349,10 @@ const FilterLayoutTab = ({
                                     <Select
                                         clearable={false}
                                         value={localizedSelectedSelectionMode}
-                                        options={localizedSelectionModeOptions}
+                                        options={localizedSelectionModeOptionsWithDisabledMultiple}
                                         placeholder="Select selection mode..."
                                         disabled={isStyleList}
-                                        onChange={(val) => {
-                                            onChange('layout.selectionMode', val?.value);
-                                            // pick first one if changed to single
-                                            onEditorChange('selections', {
-                                                ...selections,
-                                                [data.id]: val?.value === 'single' ? selections[data.id].length > 0 ? [selections[data.id][0]] : [] : selections[data.id]
-                                            });
-
-                                        }}
+                                        onChange={handleSelectionModeChange}
                                     />
                                 </InputGroup>
                             </FormGroup>
@@ -233,12 +369,14 @@ const FilterLayoutTab = ({
                                 </InputGroup>
                             </FormGroup>
                             <FormGroup className="form-group-flex">
-                                <ControlLabel><Message msgId="widgets.filterWidget.maxHeight" /></ControlLabel>
+                                <ControlLabel>
+                                    <Message msgId={layout.variant === 'slider' ? 'height' : 'widgets.filterWidget.maxHeight'} />
+                                </ControlLabel>
                                 <InputGroup>
                                     <LocalizedFormControl
                                         type="number"
                                         value={layout.maxHeight || ''}
-                                        placeholder="widgets.filterWidget.maxHeightPlaceholder"
+                                        placeholder={layout.variant === 'slider' ? 'styleeditor.placeholderInput' : 'widgets.filterWidget.maxHeightPlaceholder'}
                                         onChange={(e) => {
                                             const value = e.target.value === '' ? undefined : parseInt(e.target.value, 10);
                                             onChange('layout.maxHeight', value);
@@ -285,6 +423,117 @@ const FilterLayoutTab = ({
                                     onChange={() => onChange('layout.forceSelection', !layout.forceSelection)}
                                 />
                             </FormGroup>
+                            {layout.variant === 'slider' && (
+                                <>
+                                    <FormGroup className="form-group-flex">
+                                        <ControlLabel>
+                                            <Message msgId="widgets.filterWidget.showSelectedValue" />
+                                            &nbsp;
+                                            <InfoPopover
+                                                placement="top"
+                                                text={<Message msgId="widgets.filterWidget.showSelectedValueTooltip" />}
+                                                iconStyle={{ marginLeft: 8, color: '#999', cursor: 'default' }}
+                                            />
+                                        </ControlLabel>
+                                        <Checkbox
+                                            checked={layout.showSelectedValue ?? layout.showValueLabel !== false}
+                                            onChange={() => onChange('layout.showSelectedValue', !(layout.showSelectedValue ?? layout.showValueLabel !== false))}
+                                        />
+                                    </FormGroup>
+                                    <FormGroup className="form-group-flex">
+                                        <ControlLabel>
+                                            <Message msgId="widgets.filterWidget.showTicks" />
+                                            &nbsp;
+                                            <InfoPopover
+                                                placement="top"
+                                                text={<Message msgId="widgets.filterWidget.showTicksTooltip" />}
+                                                iconStyle={{ marginLeft: 8, color: '#999', cursor: 'default' }}
+                                            />
+                                        </ControlLabel>
+                                        <Checkbox
+                                            checked={showTicks}
+                                            onChange={() => onChange('layout.showTicks', !showTicks)}
+                                        />
+                                    </FormGroup>
+                                    {showTicks && (
+                                        <>
+                                            <FormGroup className="form-group-flex">
+                                                <ControlLabel>
+                                                    <Message msgId="widgets.filterWidget.tickAngle" />
+                                                    &nbsp;
+                                                    <InfoPopover
+                                                        placement="top"
+                                                        text={<Message msgId="widgets.filterWidget.tickAngleTooltip" />}
+                                                        iconStyle={{ marginLeft: 8, color: '#999', cursor: 'default' }}
+                                                    />
+                                                </ControlLabel>
+                                                <TickAngleControl
+                                                    value={tickAngle}
+                                                    onChange={(nextTickAngle) => onChange('layout.tickAngle', nextTickAngle)}
+                                                />
+                                            </FormGroup>
+                                            <FormGroup className="form-group-flex">
+                                                <ControlLabel>
+                                                    <Message msgId="widgets.filterWidget.tickValues" />
+                                                    &nbsp;
+                                                    <InfoPopover
+                                                        placement="top"
+                                                        text={<Message msgId="widgets.filterWidget.tickValuesTooltip" />}
+                                                        iconStyle={{ marginLeft: 8, color: '#999', cursor: 'default' }}
+                                                    />
+                                                </ControlLabel>
+                                                <InputGroup>
+                                                    <DebouncedLocalizedFormControl
+                                                        type="text"
+                                                        value={layout.tickValues || ''}
+                                                        placeholder="widgets.filterWidget.tickValuesPlaceholder"
+                                                        onChange={(value) => onChange('layout.tickValues', value)}
+                                                    />
+                                                    {showTickAutofillButton && (
+                                                        <InputGroup.Button>
+                                                            <OverlayTrigger
+                                                                placement="top"
+                                                                overlay={(
+                                                                    <Tooltip id="ms-filter-slider-fill-tick-values-tooltip">
+                                                                        <Message msgId="widgets.filterWidget.fillTickValuesTooltip" />
+                                                                    </Tooltip>
+                                                                )}
+                                                            >
+                                                                <Button
+                                                                    className="ms-filter-slider-fill-tick-values-btn"
+                                                                    bsSize="small"
+                                                                    onClick={handleAutofillTickValues}
+                                                                >
+                                                                    <Glyphicon glyph="list" />
+                                                                </Button>
+                                                            </OverlayTrigger>
+                                                        </InputGroup.Button>
+                                                    )}
+                                                </InputGroup>
+                                            </FormGroup>
+                                            <FormGroup className="form-group-flex">
+                                                <ControlLabel>
+                                                    <Message msgId="widgets.filterWidget.tickLabels" />
+                                                    &nbsp;
+                                                    <InfoPopover
+                                                        placement="top"
+                                                        text={<Message msgId="widgets.filterWidget.tickLabelsTooltip" />}
+                                                        iconStyle={{ marginLeft: 8, color: '#999', cursor: 'default' }}
+                                                    />
+                                                </ControlLabel>
+                                                <InputGroup>
+                                                    <DebouncedLocalizedFormControl
+                                                        type="text"
+                                                        value={layout.tickLabels || ''}
+                                                        placeholder="widgets.filterWidget.tickLabelsPlaceholder"
+                                                        onChange={(value) => onChange('layout.tickLabels', value)}
+                                                    />
+                                                </InputGroup>
+                                            </FormGroup>
+                                        </>
+                                    )}
+                                </>
+                            )}
                         </div>
                     </Collapse>
                 )}
@@ -294,4 +543,3 @@ const FilterLayoutTab = ({
 };
 
 export default FilterLayoutTab;
-
diff --git a/web/client/components/widgets/builder/wizard/filter/FilterList.jsx b/web/client/components/widgets/builder/wizard/filter/FilterList.jsx
index 1ec454101af..80c852583c0 100644
--- a/web/client/components/widgets/builder/wizard/filter/FilterList.jsx
+++ b/web/client/components/widgets/builder/wizard/filter/FilterList.jsx
@@ -14,7 +14,8 @@ const FilterList = ({
     filters = [],
     selections = {},
     getSelectionHandler = () => () => {},
-    selectedFilterId
+    selectedFilterId,
+    onSelectableItemsChange = () => {}
 }) => {
     if (filters.length === 0) {
         return (
@@ -63,6 +64,7 @@ const FilterList = ({
                                 selections={selections[filter.id] || []}
                                 onSelectionChange={getSelectionHandler(filter.id)}
                                 missingParameters={missingParameters}
+                                onSelectableItemsChange={onSelectableItemsChange}
                             />
                         </div>
                     );
diff --git a/web/client/components/widgets/builder/wizard/filter/FilterSlider.jsx b/web/client/components/widgets/builder/wizard/filter/FilterSlider.jsx
new file mode 100644
index 00000000000..3300fb2a813
--- /dev/null
+++ b/web/client/components/widgets/builder/wizard/filter/FilterSlider.jsx
@@ -0,0 +1,195 @@
+/*
+ * Copyright 2025, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup } from 'react-bootstrap';
+import Slider from 'react-nouislider';
+import Message from '../../../../I18N/Message';
+
+const parseList = (value) => {
+    if (Array.isArray(value)) {
+        return value;
+    }
+    if (typeof value === 'string') {
+        return value
+            .split(/[,\n;]+/)
+            .map(item => item.trim())
+            .filter(Boolean);
+    }
+    return [];
+};
+
+const getTickAngle = (value) => {
+    if (value === undefined || value === null || value === '') {
+        return -90;
+    }
+    const angle = Number(value);
+    if (!Number.isFinite(angle)) {
+        return -90;
+    }
+    return Math.max(-90, Math.min(90, angle));
+};
+
+const FilterSlider = ({
+    items = [],
+    selectedValues = [],
+    onSelectionChange = () => {},
+    layoutMaxHeight,
+    showSelectedValue = false,
+    showTicks = false,
+    tickValues = [],
+    tickLabels = [],
+    tickAngle
+}) => {
+    const normalizedItems = useMemo(() => items.filter(item => item && item.id !== undefined && item.id !== null), [items]);
+    const normalizedSelectedValues = Array.isArray(selectedValues) ? selectedValues : [selectedValues];
+    const requestedTickValues = useMemo(() => parseList(tickValues), [tickValues]);
+    const itemMatchIndex = normalizedItems.findIndex(item => String(item.id) === String(normalizedSelectedValues[0]));
+    const hasExplicitSelection = normalizedSelectedValues.length > 0
+        && normalizedSelectedValues[0] !== undefined
+        && normalizedSelectedValues[0] !== null
+        && itemMatchIndex >= 0;
+    const sliderStartIndex = hasExplicitSelection ? itemMatchIndex : 0;
+    const selectedItem = hasExplicitSelection ? normalizedItems[itemMatchIndex] : null;
+    const selectedDisplayValue = selectedItem ? String(selectedItem.id) : '';
+
+    const tickEntries = useMemo(() => {
+        const labels = parseList(tickLabels);
+        if (!requestedTickValues.length) {
+            return normalizedItems.map((item, index) => ({
+                index,
+                label: item.label ?? item.id
+            }));
+        }
+        return requestedTickValues
+            .map((value, tickIndex) => {
+                const index = normalizedItems.findIndex(item => String(item.id) === String(value));
+                if (index < 0) {
+                    return null;
+                }
+                return {
+                    index,
+                    label: labels[tickIndex] ?? (normalizedItems[index].label ?? normalizedItems[index].id)
+                };
+            })
+            .filter(Boolean);
+    }, [normalizedItems, requestedTickValues, tickLabels]);
+
+    const pipValues = useMemo(() => {
+        return tickEntries.map(entry => entry.index);
+    }, [tickEntries]);
+
+    const pipFormat = useMemo(() => ({
+        to: (value) => {
+            const index = Math.round(Number(value));
+            const tickEntry = tickEntries.find(entry => entry.index === index);
+            return tickEntry ? tickEntry.label : '';
+        },
+        from: (value) => value
+    }), [tickEntries]);
+
+    if (normalizedItems.length === 0) {
+        return null;
+    }
+
+    const noSelectionClass = !hasExplicitSelection ? ' ms-filter-slider--no-selection' : '';
+    const showTicksClass = showTicks ? ' ms-filter-slider--with-ticks' : '';
+    const normalizedTickAngle = getTickAngle(tickAngle);
+    const tickAnchor = normalizedTickAngle === 0
+        ? { origin: 'center center', translateX: '-50%' }
+        : normalizedTickAngle === 90
+            ? { origin: 'left center', translateX: '5px', translateY: '-5px' }
+            : normalizedTickAngle === -90
+                ? { origin: 'right center', translateX: 'calc(-100% - 5px)', translateY: '-5px' }
+                : normalizedTickAngle < 0
+                    ? { origin: 'right center', translateX: '-100%' }
+                    : { origin: 'left center', translateX: '0%' };
+    const sliderControlHeight = typeof layoutMaxHeight === 'number' ? `${layoutMaxHeight}px` : layoutMaxHeight;
+    const sliderStyle = showTicks
+        ? {
+            '--ms-filter-slider-tick-angle': `${normalizedTickAngle}deg`,
+            '--ms-filter-slider-tick-origin': tickAnchor.origin,
+            '--ms-filter-slider-tick-translate-x': tickAnchor.translateX,
+            '--ms-filter-slider-tick-translate-y': tickAnchor.translateY ?? '-50%',
+            ...(sliderControlHeight ? { '--ms-filter-slider-control-height': sliderControlHeight } : {})
+        }
+        : undefined;
+    // In slider layout, layoutMaxHeight is intentionally treated as height.
+    const containerStyle = layoutMaxHeight ? {
+        height: layoutMaxHeight,
+        maxHeight: layoutMaxHeight,
+        overflowY: 'hidden'
+    } : undefined;
+
+    return (
+        <FormGroup className={`ms-filter-slider${noSelectionClass}${showTicksClass}`}>
+            <div className="ms-filter-slider-items" style={containerStyle}>
+                {showSelectedValue && (
+                    <div
+                        className="ms-filter-slider-selected-value"
+                        style={{
+                            marginBottom: 8,
+                            textAlign: 'right',
+                            fontSize: 10,
+                            fontWeight: 400
+                        }}
+                    >
+                        {hasExplicitSelection
+                            ? selectedDisplayValue
+                            : <Message msgId="widgets.filterWidget.sliderNotSelected" />}
+                    </div>
+                )}
+                <div className="mapstore-slider ms-filter-slider-control" style={sliderStyle}>
+                    <Slider
+                        start={[sliderStartIndex]}
+                        range={{
+                            min: 0,
+                            max: Math.max(0, normalizedItems.length - 1)
+                        }}
+                        step={1}
+                        pips={showTicks ? {
+                            mode: 'values',
+                            values: pipValues,
+                            density: 100,
+                            format: pipFormat
+                        } : undefined}
+                        onChange={(values) => {
+                            const index = Math.round(Number(values?.[0]));
+                            const nextItem = normalizedItems[index];
+                            if (nextItem) {
+                                onSelectionChange([nextItem.id]);
+                            }
+                        }}
+                    />
+                </div>
+            </div>
+        </FormGroup>
+    );
+};
+
+FilterSlider.propTypes = {
+    items: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        label: PropTypes.string.isRequired,
+        disabled: PropTypes.bool
+    })),
+    selectedValues: PropTypes.arrayOf(
+        PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    ),
+    onSelectionChange: PropTypes.func,
+    layoutMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    showSelectedValue: PropTypes.bool,
+    showTicks: PropTypes.bool,
+    tickValues: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+    tickLabels: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+    tickAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    valueAttributeType: PropTypes.string,
+    labelAttributeType: PropTypes.string
+};
+
+export default FilterSlider;
diff --git a/web/client/components/widgets/builder/wizard/filter/FilterSwitchList.jsx b/web/client/components/widgets/builder/wizard/filter/FilterSwitchList.jsx
index fffbc3df54a..d4d68a11965 100644
--- a/web/client/components/widgets/builder/wizard/filter/FilterSwitchList.jsx
+++ b/web/client/components/widgets/builder/wizard/filter/FilterSwitchList.jsx
@@ -50,11 +50,11 @@ const FilterSwitchList = ({
     return (
         <FormGroup className="ms-filter-switch-list">
             <div className={containerClassName} style={containerStyle}>
-                {items.map(({ id, label, disabled }) => {
+                {items.map(({ id, label, disabled }, index) => {
                     const isChecked = selectedValues.includes(id);
                     return (
                         <div
-                            key={id}
+                            key={`${id}-${index}`}
                             className="ms-filter-switch-list-item"
                         >
                             <SwitchButton
@@ -88,4 +88,3 @@ FilterSwitchList.propTypes = {
 };
 
 export default FilterSwitchList;
-
diff --git a/web/client/components/widgets/builder/wizard/filter/__tests__/FilterLayoutTab-test.jsx b/web/client/components/widgets/builder/wizard/filter/__tests__/FilterLayoutTab-test.jsx
index 5a4011a610c..ed55d488ba3 100644
--- a/web/client/components/widgets/builder/wizard/filter/__tests__/FilterLayoutTab-test.jsx
+++ b/web/client/components/widgets/builder/wizard/filter/__tests__/FilterLayoutTab-test.jsx
@@ -66,5 +66,115 @@ describe('FilterLayoutTab component', () => {
         labelInput.value = 'Test Label';
         Simulate.change(labelInput);
     });
-});
 
+    it('should include slider in the variant options when selection mode is single', () => {
+        ReactDOM.render(
+            <FilterLayoutTab
+                data={{
+                    layout: {
+                        selectionMode: 'single'
+                    }
+                }}
+            />,
+            document.getElementById("container")
+        );
+
+        const container = document.getElementById('container');
+        const variantControl = container.querySelector('.ms-filter-items-panel .Select-control');
+        expect(variantControl).toExist();
+        Simulate.keyDown(variantControl, { keyCode: 40 });
+
+        const options = container.querySelectorAll('.Select-option');
+        const sliderOption = Array.from(options).find(option => option.textContent.trim() === 'Slider');
+        expect(sliderOption).toExist();
+    });
+
+    it('should not include slider in the variant options when selection mode is multiple', () => {
+        ReactDOM.render(
+            <FilterLayoutTab
+                data={{
+                    layout: {
+                        selectionMode: 'multiple'
+                    }
+                }}
+            />,
+            document.getElementById("container")
+        );
+
+        const container = document.getElementById('container');
+        const variantControl = container.querySelector('.ms-filter-items-panel .Select-control');
+        expect(variantControl).toExist();
+        Simulate.keyDown(variantControl, { keyCode: 40 });
+
+        const options = container.querySelectorAll('.Select-option');
+        const sliderOption = Array.from(options).find(option => option.textContent.trim() === 'Slider');
+        expect(sliderOption).toNotExist();
+    });
+
+    it('should call onChange when tick angle changes', (done) => {
+        ReactDOM.render(
+            <FilterLayoutTab
+                data={{
+                    layout: {
+                        variant: 'slider',
+                        selectionMode: 'single',
+                        showTicks: true,
+                        tickAngle: 90
+                    }
+                }}
+                onChange={(key, value) => {
+                    expect(key).toBe('layout.tickAngle');
+                    expect(value).toBe(45);
+                    done();
+                }}
+            />,
+            document.getElementById("container")
+        );
+
+        const container = document.getElementById('container');
+        const tickAngleControl = container.querySelector('.ms-filter-tick-angle-control');
+        expect(tickAngleControl).toExist();
+
+        const tickAngleInput = container.querySelector('.ms-filter-tick-angle-range');
+        expect(tickAngleInput).toExist();
+        expect(tickAngleInput.min).toBe('-90');
+        expect(tickAngleInput.max).toBe('90');
+        const tickAngleNumberInput = container.querySelector('.ms-filter-tick-angle-number');
+        expect(tickAngleNumberInput).toExist();
+        expect(tickAngleNumberInput.min).toBe('-90');
+        expect(tickAngleNumberInput.max).toBe('90');
+        expect(tickAngleNumberInput.value).toBe('90');
+        tickAngleInput.value = '45';
+        Simulate.change(tickAngleInput);
+    });
+
+    it('should call onChange when tick angle number input changes', (done) => {
+        ReactDOM.render(
+            <FilterLayoutTab
+                data={{
+                    layout: {
+                        variant: 'slider',
+                        selectionMode: 'single',
+                        showTicks: true,
+                        tickAngle: -90
+                    }
+                }}
+                onChange={(key, value) => {
+                    expect(key).toBe('layout.tickAngle');
+                    expect(value).toBe(45);
+                    done();
+                }}
+            />,
+            document.getElementById("container")
+        );
+
+        const container = document.getElementById('container');
+        const tickAngleControl = container.querySelector('.ms-filter-tick-angle-control');
+        expect(tickAngleControl).toExist();
+
+        const tickAngleNumberInput = container.querySelector('.ms-filter-tick-angle-number');
+        expect(tickAngleNumberInput).toExist();
+        tickAngleNumberInput.value = '45';
+        Simulate.change(tickAngleNumberInput);
+    });
+});
diff --git a/web/client/components/widgets/widget/FilterWidget.jsx b/web/client/components/widgets/widget/FilterWidget.jsx
index b2ff1e727a3..1f9f0946e6f 100644
--- a/web/client/components/widgets/widget/FilterWidget.jsx
+++ b/web/client/components/widgets/widget/FilterWidget.jsx
@@ -75,7 +75,7 @@ const FilterWidget = ({
             topRightItems={topRightItems}
             options={options}
         >
-            <div className="mapstore-widget-filter-content" style={{ padding: '15px' }}>
+            <div className="mapstore-widget-filter-content">
                 {filters.length === 0 ? (
                     <div className="ms-filter-widget-empty" style={{ textAlign: 'center', color: '#999', padding: '20px' }}>
                         No filters configured
@@ -143,4 +143,3 @@ export default connect(createStructuredSelector({
     targetsWithDisabledFilter: interactionTargetsFilterDisabledSelector,
     applyStyleOutOfSyncForWidget: (state, ownProps) => getApplyStyleOutOfSyncForFilterWidget(state, ownProps?.id)
 }))(FilterWidget);
-
diff --git a/web/client/components/widgets/widget/filter-widget.less b/web/client/components/widgets/widget/filter-widget.less
index 1620ffbe042..419fee3600a 100644
--- a/web/client/components/widgets/widget/filter-widget.less
+++ b/web/client/components/widgets/widget/filter-widget.less
@@ -1,3 +1,7 @@
+.mapstore-widget-filter-content {
+    padding: 15px 15px 0;
+}
+
 .ms-filter-selector-header {
     display: flex;
     flex-direction: row;
diff --git a/web/client/plugins/widgetbuilder/FilterBuilderContent.jsx b/web/client/plugins/widgetbuilder/FilterBuilderContent.jsx
index 3df58a72634..1880e56ca22 100644
--- a/web/client/plugins/widgetbuilder/FilterBuilderContent.jsx
+++ b/web/client/plugins/widgetbuilder/FilterBuilderContent.jsx
@@ -5,7 +5,7 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { useMemo, useCallback, useEffect } from 'react';
+import React, { useMemo, useCallback, useEffect, useRef, useState } from 'react';
 import FilterWizard from '../../components/widgets/builder/wizard/FilterWizard';
 
 import useBatchedUpdates from '../../hooks/useBatchedUpdates';
@@ -60,6 +60,7 @@ const FilterBuilderContent = ({
     }, [enabled, widgetType, filters.length, layer, onChangeEditor]);
 
 
+    const [selectableItems, setSelectableItems] = useState([]);
     const selectedFilter = useMemo(
         () => filters.find(filter => filter.id === selectedFilterId) || null,
         [filters, selectedFilterId]
@@ -70,6 +71,16 @@ const FilterBuilderContent = ({
         }
         return null;
     }, [selectedFilter, filters]);
+    const selectableItemsSignatureRef = useRef('');
+    const handleSelectableItemsChange = useCallback((nextSelectableItems = []) => {
+        const nextSignature = nextSelectableItems
+            .map(item => `${item?.id ?? ''}|${item?.label ?? ''}`)
+            .join('||');
+        if (nextSignature !== selectableItemsSignatureRef.current) {
+            selectableItemsSignatureRef.current = nextSignature;
+            setSelectableItems(nextSelectableItems);
+        }
+    }, []);
 
     const handleFilterSelect = useCallback((filterId) => {
         onChangeEditor('selectedFilterId', filterId || null);
@@ -180,6 +191,7 @@ const FilterBuilderContent = ({
         <FilterWizard
             filterData={data}
             editorData={editorData}
+            selectableItems={selectableItems}
             onChange={handleChange}
             onOpenLayerSelector={handleOpenLayerSelector}
             openFilterEditor={openFilterEditor}
@@ -197,9 +209,10 @@ const FilterBuilderContent = ({
             onDeleteFilter={handleDeleteFilter}
             onRenameFilter={handleRenameFilter}
             onSelectionChange={handleSelectionChange}
+            onSelectableItemsChange={handleSelectableItemsChange}
         />
     );
 };
+FilterBuilderContent.defaultProps = {};
 
 export default FilterBuilderContent;
-
diff --git a/web/client/plugins/widgetbuilder/FilterView.jsx b/web/client/plugins/widgetbuilder/FilterView.jsx
index 839c13f7cb7..6bc3c5d8e88 100644
--- a/web/client/plugins/widgetbuilder/FilterView.jsx
+++ b/web/client/plugins/widgetbuilder/FilterView.jsx
@@ -21,6 +21,7 @@ import FilterCheckboxList from '../../components/widgets/builder/wizard/filter/F
 import FilterChipList from '../../components/widgets/builder/wizard/filter/FilterChipList';
 import FilterDropdownList from '../../components/widgets/builder/wizard/filter/FilterDropdownList';
 import FilterSwitchList from '../../components/widgets/builder/wizard/filter/FilterSwitchList';
+import FilterSlider from '../../components/widgets/builder/wizard/filter/FilterSlider';
 import FilterNoSelectableItems from '../../components/widgets/builder/wizard/filter/FilterNoSelectableItems';
 import { isFilterSelectionValid } from './utils/filterBuilder';
 import InfoPopover from '../../components/widgets/widget/InfoPopover';
@@ -89,6 +90,29 @@ const DisabledFilterInfo = ({ interactions = [], activeTargets = {}, targetsWith
     );
 };
 
+const UnsupportedVariantInfo = ({ variant }) => (
+    <div
+        className="ms-filter-view-unsupported-variant"
+        style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '40px 20px',
+            textAlign: 'center',
+            color: '#999'
+        }}
+    >
+        <Glyphicon glyph="warning-sign" style={{ fontSize: '48px', marginBottom: '16px' }} />
+        <div style={{ fontSize: '14px', maxWidth: '400px' }}>
+            <Message
+                msgId="widgets.filterWidget.unsupportedVariantMessage"
+                msgParams={{ variant }}
+            />
+        </div>
+    </div>
+);
+
 const ApplyStyleOutOfSyncInfo = connect()(
     ({ applyStyleOutOfSync = {}, dispatch }) => {
         const [debouncedState, setDebouncedState] = useState(applyStyleOutOfSync);
@@ -157,7 +181,8 @@ const componentMap = {
     checkbox: FilterCheckboxList,
     button: FilterChipList,
     dropdown: FilterDropdownList,
-    'switch': FilterSwitchList
+    'switch': FilterSwitchList,
+    slider: FilterSlider
 };
 const FilterView = ({
     className,
@@ -172,6 +197,7 @@ const FilterView = ({
     loading = false,
     missingParameters = false,
     selectableItems = [],
+    onSelectableItemsChange = () => {},
     fetchError = false
 }) => {
     if (!filterData) {
@@ -180,11 +206,16 @@ const FilterView = ({
 
     const { layout = {} } = filterData;
     const Component = componentMap[layout.variant ?? 'checkbox'];
-    if (!Component) {
-        throw new Error(`Unsupported filter variant: ${layout.variant}`);
-    }
+    const showUnsupportedVariantWarning = !Component;
     const forceSelection = layout.forceSelection === true;
     const showForceSelectionError = !isFilterSelectionValid(filterData, selections || []);
+    const showSliderSingleItemError = layout.variant === 'slider' && selectableItems?.length === 1;
+
+    useEffect(() => {
+        if (typeof onSelectableItemsChange === 'function') {
+            onSelectableItemsChange(selectableItems);
+        }
+    }, [onSelectableItemsChange, selectableItems]);
 
     // Show message when required parameters are missing
     if (missingParameters) {
@@ -253,6 +284,16 @@ const FilterView = ({
                 layoutMaxHeight: layout.maxHeight
             };
         }
+        if (layout.variant === 'slider') {
+            return {
+                layoutMaxHeight: layout.maxHeight,
+                showSelectedValue: layout.showSelectedValue ?? layout.showValueLabel !== false,
+                showTicks: layout.showTicks !== false,
+                tickValues: layout.tickValues,
+                tickLabels: layout.tickLabels,
+                tickAngle: layout.tickAngle
+            };
+        }
         return {};
     };
 
@@ -358,7 +399,7 @@ const FilterView = ({
                         : null
                 }
 
-                {showSelectAll && (<FilterSelectAllOptions
+                {showSelectAll && !showUnsupportedVariantWarning && (<FilterSelectAllOptions
                     key={filterData.id + '-select-all'}
                     items={selectableItems}
                     selectedValues={selections || []}
@@ -368,15 +409,26 @@ const FilterView = ({
                 />)
                 }
             </div>
-            {selectableItems?.length > 0 ? (
-                <Component
-                    key={filterData.id}
-                    items={selectableItems}
-                    selectionMode={layout.selectionMode}
-                    selectedValues={selections || []}
-                    onSelectionChange={onChangeSelections}
-                    {...getLayoutProps()}
-                />
+            {showUnsupportedVariantWarning ? (
+                <UnsupportedVariantInfo variant={layout.variant} />
+            ) : selectableItems?.length > 0 ? (
+                showSliderSingleItemError ? (
+                    <div className="ms-filter-view-slider-error">
+                        <Glyphicon glyph="warning-sign" className="ms-filter-view-slider-error-icon" />
+                        <div className="ms-filter-view-slider-error-message">
+                            <Message msgId="widgets.filterWidget.sliderSingleItemError" />
+                        </div>
+                    </div>
+                ) : (
+                    <Component
+                        key={filterData.id}
+                        items={selectableItems}
+                        selectionMode={layout.selectionMode}
+                        selectedValues={selections || []}
+                        onSelectionChange={onChangeSelections}
+                        {...getLayoutProps()}
+                    />
+                )
             ) : (
                 !loading ? <FilterNoSelectableItems className="ms-filter-view-no-selectable-items" /> : null
             )}
@@ -414,8 +466,10 @@ FilterView.propTypes = {
     loading: PropTypes.bool,
     missingParameters: PropTypes.bool,
     selectableItems: PropTypes.array,
+    onSelectableItemsChange: PropTypes.func,
     fetchError: PropTypes.bool
 };
+FilterView.defaultProps = {};
 
 // Export unwrapped component for testing
 export { FilterView };
@@ -423,4 +477,3 @@ export { FilterView };
 export default compose(
     filterWidgetEnhancer
 )(FilterView);
-
diff --git a/web/client/plugins/widgetbuilder/__tests__/FilterView-test.jsx b/web/client/plugins/widgetbuilder/__tests__/FilterView-test.jsx
index 474d990e97a..c69cb6a5684 100644
--- a/web/client/plugins/widgetbuilder/__tests__/FilterView-test.jsx
+++ b/web/client/plugins/widgetbuilder/__tests__/FilterView-test.jsx
@@ -59,20 +59,20 @@ describe('FilterView component', () => {
         expect(container.innerHTML).toBe('');
     });
 
-    it('returns null when componentMap does not contain the variant', (done) => {
+    it('renders a warning when componentMap does not contain the variant', () => {
         const container = document.getElementById("container");
         const filterData = createMockFilterData('unknown-variant');
-        try {
-            renderWithProvider(
-                <FilterView
-                    filterData={filterData}
-                />,
-                container
-            );
-        } catch (e) {
-            expect(e.message).toBe('Unsupported filter variant: unknown-variant');
-            done();
-        }
+        renderWithProvider(
+            <FilterView
+                filterData={filterData}
+                selectableItems={mockSelectableItems}
+            />,
+            container
+        );
+
+        expect(container.querySelector('.ms-filter-view-unsupported-variant')).toExist();
+        expect(container.textContent).toContain('widgets.filterWidget.unsupportedVariantMessage');
+        expect(container.querySelector('.ms-filter-button-list-item')).toNotExist();
     });
 
     it('renders button component when variant is button', () => {
@@ -162,6 +162,96 @@ describe('FilterView component', () => {
 
     });
 
+    it('renders slider component when variant is slider', () => {
+        const container = document.getElementById("container");
+        const filterData = createMockFilterData('slider', 'single');
+
+        renderWithProvider(
+            <FilterView
+                filterData={filterData}
+                selectableItems={[
+                    { id: '1', label: 'One' },
+                    { id: '2', label: 'Two' },
+                    { id: '3', label: 'Three' }
+                ]}
+                selections={['2']}
+            />,
+            container
+        );
+
+        expect(container.querySelector('.ms-filter-slider')).toExist();
+    });
+
+    it('shows an error message instead of slider when filter has only one selectable item', () => {
+        const container = document.getElementById("container");
+        const filterData = createMockFilterData('slider', 'single');
+
+        renderWithProvider(
+            <FilterView
+                filterData={filterData}
+                selectableItems={[
+                    { id: '1', label: 'One' }
+                ]}
+                selections={['1']}
+            />,
+            container
+        );
+
+        expect(container.querySelector('.ms-filter-slider')).toNotExist();
+        expect(container.querySelector('.ms-filter-view-slider-error')).toExist();
+    });
+
+    it('shows selected value outside the slider', () => {
+        const container = document.getElementById("container");
+        const filterData = createMockFilterData('slider', 'single', {
+            showSelectedValue: true
+        });
+
+        renderWithProvider(
+            <FilterView
+                filterData={filterData}
+                selectableItems={[
+                    { id: '1', label: 'One' },
+                    { id: '2', label: 'Two' }
+                ]}
+                selections={['2']}
+            />,
+            container
+        );
+
+        const selectedValue = container.querySelector('.ms-filter-slider-selected-value');
+        expect(selectedValue).toExist();
+        expect(selectedValue.textContent).toContain('2');
+    });
+
+    it('renders tick labels in the slider', () => {
+        const container = document.getElementById("container");
+        const filterData = createMockFilterData('slider', 'single', {
+            showTicks: true,
+            tickValues: '1693307400000',
+            tickLabels: 'Event',
+            tickAngle: 90
+        });
+
+        renderWithProvider(
+            <FilterView
+                filterData={filterData}
+                selectableItems={[
+                    { id: '1693307400000', label: '1693307400000' },
+                    { id: '1693307400001', label: '1693307400001' }
+                ]}
+                selections={['1693307400000']}
+            />,
+            container
+        );
+
+        expect(container.querySelector('.ms-filter-slider--with-ticks')).toExist();
+        expect(container.querySelector('.ms-filter-slider-control').style.getPropertyValue('--ms-filter-slider-tick-angle')).toBe('90deg');
+        const tickLabels = container.querySelectorAll('.noUi-value');
+        expect(tickLabels.length).toBeGreaterThan(0);
+        expect(container.textContent).toContain('Event');
+    });
+
     it('shows missing parameters message when missingParameters is true', () => {
         const container = document.getElementById("container");
         const filterData = createMockFilterData('button');
@@ -292,4 +382,3 @@ describe('FilterView component', () => {
         expect(onSelectionChangeSpy).toNotHaveBeenCalled();
     });
 });
-
diff --git a/web/client/plugins/widgetbuilder/utils/filterBuilder.js b/web/client/plugins/widgetbuilder/utils/filterBuilder.js
index fc744951019..c3d920cd77d 100644
--- a/web/client/plugins/widgetbuilder/utils/filterBuilder.js
+++ b/web/client/plugins/widgetbuilder/utils/filterBuilder.js
@@ -14,7 +14,9 @@ export const createEmptyFilterData = () => ({
     dataSource: 'features',
     valuesFrom: 'grouped',
     valueAttribute: undefined,
+    valueAttributeType: undefined,
     labelAttribute: undefined,
+    labelAttributeType: undefined,
     sortByAttribute: undefined,
     sortOrder: 'ASC',
     maxFeatures: 20,
@@ -36,6 +38,11 @@ export const createNewFilter = (filtersCount = 0) => {
             selectionMode: 'multiple',
             direction: 'vertical',
             maxHeight: undefined,
+            showSelectedValue: true,
+            showTicks: true,
+            tickValues: '',
+            tickLabels: '',
+            tickAngle: 270,
             label: getFilterName(filtersCount),
             titleStyle: {
                 fontSize: 14,
@@ -106,4 +113,3 @@ export const areAllCustomNoSelectionFiltersValid = (filters = [], isFilterValid)
         return defaultFilter && isFilterValid(defaultFilter);
     });
 };
-
diff --git a/web/client/themes/default/less/sliders.less b/web/client/themes/default/less/sliders.less
index 390b3a669e9..5a05daad922 100644
--- a/web/client/themes/default/less/sliders.less
+++ b/web/client/themes/default/less/sliders.less
@@ -246,3 +246,50 @@
         }
     }
 }
+
+// Filter widget slider: state and pip label layout only
+.ms-filter-slider-items {
+    padding-left: 25px;
+    padding-right: 25px;
+}
+.ms-filter-slider.ms-filter-slider--no-selection {
+    .mapstore-slider .noUi-target.noUi-horizontal .noUi-base .noUi-origin .noUi-handle {
+        opacity: 0;
+        pointer-events: none;
+    }
+}
+
+.ms-filter-slider.ms-filter-slider--with-ticks .ms-filter-slider-control {
+    height: var(--ms-filter-slider-control-height, 60px);
+}
+
+.ms-filter-slider .mapstore-slider .noUi-target.noUi-horizontal .noUi-pips.noUi-pips-horizontal {
+    cursor: default;
+    padding: 5px 0px;
+
+    .noUi-marker {
+        cursor: default;
+        height: 8px;
+    }
+
+    .noUi-value {
+        width: fit-content;
+        font-size: 10px;
+        cursor: default;
+        white-space: nowrap;
+        -webkit-transform-origin: var(--ms-filter-slider-tick-origin, center center);
+        transform-origin: var(--ms-filter-slider-tick-origin, center center);
+        -webkit-transform: translate3d(var(--ms-filter-slider-tick-translate-x, -50%), var(--ms-filter-slider-tick-translate-y, -50%), 0) rotate(var(--ms-filter-slider-tick-angle, -90deg));
+        transform: translate3d(var(--ms-filter-slider-tick-translate-x, -50%), var(--ms-filter-slider-tick-translate-y, -50%), 0) rotate(var(--ms-filter-slider-tick-angle, -90deg));
+
+        &.noUi-value-horizontal {
+            margin-left: 0;
+            margin-top: 8px;
+        }
+    }
+
+    .noUi-value-large {
+        margin-top: 0;
+        padding-top: 10px;
+    }
+}
diff --git a/web/client/themes/default/less/wizard.less b/web/client/themes/default/less/wizard.less
index be3a2441aa2..568142579cb 100644
--- a/web/client/themes/default/less/wizard.less
+++ b/web/client/themes/default/less/wizard.less
@@ -255,8 +255,22 @@
             cursor: pointer;
             font-size: 14px;
         }
+        .ms-filter-slider-fill-tick-values-btn {
+            width: 34px;
+            min-width: 34px;
+            height: 30px;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .ms-filter-tick-angle-control {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex: 1;
+        }
     }
-
 }
 
 .ms-filter-builder-content {
@@ -341,3 +355,20 @@
     border: 1px dashed transparent;
     border-radius: 4px;
 }
+
+.ms-filter-view-slider-error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    text-align: center;
+    .ms-filter-view-slider-error-icon {
+        font-size: 32px;
+        margin-bottom: 12px;
+    }
+    .ms-filter-view-slider-error-message {
+        font-size: 14px;
+        max-width: 400px;
+    }
+}
\ No newline at end of file
diff --git a/web/client/translations/data.de-DE.json b/web/client/translations/data.de-DE.json
index 303d61e1ab4..04e4d532be8 100644
--- a/web/client/translations/data.de-DE.json
+++ b/web/client/translations/data.de-DE.json
@@ -2525,6 +2525,21 @@
         "selectAll": "Alle auswählen",
         "clear": "Löschen",
         "showSelectAllClear": "Optionen 'Alle auswählen' und 'Löschen' anzeigen",
+        "showValueLabel": "Wertbeschriftung anzeigen",
+        "showSelectedValue": "Ausgewählten Wert anzeigen",
+        "showSelectedValueTooltip": "Zeigt den aktuell ausgewählten Wert oberhalb des Schiebereglers an.",
+        "sliderNotSelected": "Nicht ausgewählt",
+        "showTicks": "Markierungen anzeigen",
+        "showTicksTooltip": "Zeigt die Markierungen auf dem Schieberegler an oder blendet sie aus.",
+        "tickValues": "Werte für Markierungen",
+        "tickLabels": "Beschriftungen für Markierung",
+        "tickValuesPlaceholder": "Durch Kommas getrennte Werte",
+        "tickLabelsPlaceholder": "Durch Kommas getrennte Beschriftungen",
+        "tickValuesTooltip": "Geben Sie durch Kommas getrennte Werte ein, die für die Markierungen berücksichtigt werden sollen. Nur die Beschriftung passender Werte wird angezeigt.",
+        "tickLabelsTooltip": "Geben Sie Ersatzbeschriftungen für die aufgeführten Markierungswerte in derselben Reihenfolge wie die Markierungswerte ein.",
+        "tickAngle": "Markierungsbeschriftungswinkel",
+        "tickAngleTooltip": "Legt den Rotationswinkel der Markierungsbeschriftung in Grad fest.",
+        "fillTickValuesTooltip": "Mit verfügbaren Filterwerten füllen",
 
         "defaultFilter": "Standardfilter",
         "defaultFilterInfo": "Definieren Sie einen Filter, der angewendet wird, wenn nichts ausgewählt ist. Tipp: Wenn Sie nichts anzeigen möchten, wenn nichts ausgewählt ist, erstellen Sie einen Filter, der immer keine Elemente zurückgibt.",
@@ -2554,6 +2569,8 @@
         "valueFromAttributeDescription": "Ruft alle vorhandenen Features ab, einschließlich möglicher doppelter Werte für das ausgewählte Attribut.",
         "missingParametersMessage": "Bitte wählen Sie die erforderlichen Felder aus, um die Filterliste zu generieren",
         "fetchError": "Fehler beim Abrufen der Daten",
+        "unsupportedVariantMessage": "Nicht unterstützte Filtervariante: {variant}.",
+        "sliderSingleItemError": "Der Schieberegler-Filter benötigt mindestens zwei auswählbare Werte.",
         "noSelectableItems": "Keine auswählbaren Filterelemente.",
         "filters": "Filter",
         "styles": "Stile",
diff --git a/web/client/translations/data.en-US.json b/web/client/translations/data.en-US.json
index ba82ffe63ca..b815b2f44e2 100644
--- a/web/client/translations/data.en-US.json
+++ b/web/client/translations/data.en-US.json
@@ -2509,6 +2509,21 @@
         "selectAll": "Select All",
         "clear": "Clear",
         "showSelectAllClear": "Show Select All / Clear",
+        "showValueLabel": "Show Value Label",
+        "showSelectedValue": "Show Selected Value",
+        "showSelectedValueTooltip": "Shows the currently selected value above the slider.",
+        "sliderNotSelected": "Not selected",
+        "showTicks": "Show Ticks",
+        "showTicksTooltip": "Shows or hides tick marks on the slider.",
+        "tickValues": "Values For Ticks",
+        "tickLabels": "Labels For Ticks",
+        "tickValuesPlaceholder": "Comma-separated values",
+        "tickLabelsPlaceholder": "Comma-separated labels",
+        "tickValuesTooltip": "Enter comma-separated values to consider for the ticks. Only matching value's label will be shown.",
+        "tickLabelsTooltip": "Enter comma-separated replacement labels in the same order as tick values.",
+        "tickAngle": "Tick Label Angle",
+        "tickAngleTooltip": "Sets the tick label rotation angle in degrees.",
+        "fillTickValuesTooltip": "Fill with available filter values",
         "showNoTargetsInfoLabel": "No target message",
         "showNoTargetsInfoDescription": "When no target is connected to the filter, or the layers/widgets connected are not visible, a message appears to notify the user that the filter will have no effect.",
         "noInteractionsInfo": "No target connected. Use the connections panel to connect the filter to layers or widgets.",
@@ -2536,6 +2551,8 @@
         "valueFromAttributeDescription": "Fetches all existing features including possible duplicated values for the selected attribute.",
         "missingParametersMessage": "Please select required fields to generate the filter list",
         "fetchError": "Failed to fetch data",
+        "unsupportedVariantMessage": "Unsupported filter variant: {variant}.",
+        "sliderSingleItemError": "Slider filter requires at least two selectable values.",
         "noSelectableItems": "No selectable filter items.",
         "filters": "Filters",
         "styles": "Styles",
diff --git a/web/client/translations/data.es-ES.json b/web/client/translations/data.es-ES.json
index f0b04ded6a4..5dc1c61ad9a 100644
--- a/web/client/translations/data.es-ES.json
+++ b/web/client/translations/data.es-ES.json
@@ -2482,6 +2482,21 @@
         "selectAll": "Seleccionar todo",
         "clear": "Limpiar",
         "showSelectAllClear": "Mostrar 'Seleccionar todo' y 'Limpiar'",
+        "showValueLabel": "Mostrar etiqueta del valor",
+        "showSelectedValue": "Mostrar valor seleccionado",
+        "showSelectedValueTooltip": "Muestra el valor actualmente seleccionado encima del deslizador.",
+        "sliderNotSelected": "No seleccionado",
+        "showTicks": "Mostrar marcas",
+        "showTicksTooltip": "Muestra u oculta las marcas del deslizador.",
+        "tickValues": "Valores para marcas",
+        "tickLabels": "Etiquetas para marca",
+        "tickValuesPlaceholder": "Valores separados por comas",
+        "tickLabelsPlaceholder": "Etiquetas separadas por comas",
+        "tickValuesTooltip": "Introduce valores separados por comas para considerarlos como marcas. Solo se mostrará la etiqueta del valor coincidente.",
+        "tickLabelsTooltip": "Introduce etiquetas de reemplazo para los valores de marca indicados, en el mismo orden que los valores de marca.",
+        "tickAngle": "Ángulo de etiqueta de marca",
+        "tickAngleTooltip": "Define el ángulo de rotación de la etiqueta de marca en grados.",
+        "fillTickValuesTooltip": "Rellenar con valores de filtro disponibles",
 
         "defaultFilter": "Filtro predeterminado",
         "defaultFilterInfo": "Define un filtro para aplicar cuando no hay nada seleccionado. Sugerencia: si desea no mostrar nada cuando no hay nada seleccionado, cree un filtro que no devuelva ninguna característica",
@@ -2511,6 +2526,8 @@
         "valueFromAttributeDescription": "Recupera todas las entidades existentes incluyendo los posibles valores duplicados para el atributo seleccionado.",
         "missingParametersMessage": "Por favor seleccione los campos requeridos para generar la lista de filtros",
         "fetchError": "Error al obtener los datos",
+        "unsupportedVariantMessage": "Variante de filtro no admitida: {variant}.",
+        "sliderSingleItemError": "El filtro de deslizador requiere al menos dos valores seleccionables.",
         "noSelectableItems": "No hay elementos de filtro seleccionables.",
         "filters": "Filtros",
         "styles": "Estilos",
diff --git a/web/client/translations/data.fr-FR.json b/web/client/translations/data.fr-FR.json
index b221b9ee20c..c30ddfe75c1 100644
--- a/web/client/translations/data.fr-FR.json
+++ b/web/client/translations/data.fr-FR.json
@@ -2486,6 +2486,21 @@
         "selectAll": "Tout sélectionner",
         "clear": "Effacer",
         "showSelectAllClear": "Afficher Tout Sélectionner / Effacer",
+        "showValueLabel": "Afficher le libellé de la valeur",
+        "showSelectedValue": "Afficher la valeur sélectionnée",
+        "showSelectedValueTooltip": "Affiche la valeur actuellement sélectionnée au-dessus du curseur.",
+        "sliderNotSelected": "Non sélectionné",
+        "showTicks": "Afficher les repères",
+        "showTicksTooltip": "Affiche ou masque les repères sur le curseur.",
+        "tickValues": "Valeurs pour les repères",
+        "tickLabels": "Libellés pour le repère",
+        "tickValuesPlaceholder": "Valeurs séparées par des virgules",
+        "tickLabelsPlaceholder": "Libellés séparés par des virgules",
+        "tickValuesTooltip": "Saisissez des valeurs séparées par des virgules à prendre en compte pour les repères. Seul le libellé de la valeur correspondante sera affiché.",
+        "tickLabelsTooltip": "Saisissez des libellés de remplacement pour les valeurs de repère listées, dans le même ordre que les valeurs de repère.",
+        "tickAngle": "Angle du libellé du repère",
+        "tickAngleTooltip": "Définit l'angle de rotation du libellé du repère en degrés.",
+        "fillTickValuesTooltip": "Remplir avec les valeurs de filtre disponibles",
 
         "defaultFilter": "Filtre par défaut",
         "defaultFilterInfo": "Définir un filtre à appliquer lorsqu'aucun élément n'est sélectionné. Suggestion : si vous souhaitez n'afficher rien lorsqu'aucun élément n'est sélectionné, créez un filtre qui ne renvoie aucune entité",
@@ -2515,6 +2530,8 @@
         "valueFromAttributeDescription": "Récupère toutes les entités existantes y compris les valeurs dupliquées possibles pour l'attribut sélectionné.",
         "missingParametersMessage": "Veuillez sélectionner les champs requis pour générer la liste des filtres",
         "fetchError": "Échec de la récupération des données",
+        "unsupportedVariantMessage": "Variante de filtre non prise en charge : {variant}.",
+        "sliderSingleItemError": "Le filtre avec curseur nécessite au moins deux valeurs sélectionnables.",
         "noSelectableItems": "Aucun élément de filtre sélectionnable.",
         "filters": "Filtres",
         "styles": "Styles",
diff --git a/web/client/translations/data.it-IT.json b/web/client/translations/data.it-IT.json
index 9a4a0f724dc..a5a7032157c 100644
--- a/web/client/translations/data.it-IT.json
+++ b/web/client/translations/data.it-IT.json
@@ -2486,6 +2486,21 @@
         "selectAll": "Seleziona tutto",
         "clear": "Cancella",
         "showSelectAllClear": "Mostra 'Seleziona tutto' e 'Cancella'",
+        "showValueLabel": "Mostra etichetta valore",
+        "showSelectedValue": "Mostra valore selezionato",
+        "showSelectedValueTooltip": "Mostra il valore attualmente selezionato sopra lo slider.",
+        "sliderNotSelected": "Non selezionato",
+        "showTicks": "Mostra tacche",
+        "showTicksTooltip": "Mostra o nasconde le tacche sullo slider.",
+        "tickValues": "Valori per tacche",
+        "tickLabels": "Etichette per tacca",
+        "tickValuesPlaceholder": "Valori separati da virgole",
+        "tickLabelsPlaceholder": "Etichette separate da virgole",
+        "tickValuesTooltip": "Inserisci valori separati da virgole da considerare per le tacche. Verrà mostrata solo l'etichetta del valore corrispondente.",
+        "tickLabelsTooltip": "Inserisci etichette sostitutive per i valori di tacca elencati, nello stesso ordine dei valori di tacca.",
+        "tickAngle": "Angolo etichetta tacca",
+        "tickAngleTooltip": "Imposta l'angolo di rotazione dell'etichetta della tacca in gradi.",
+        "fillTickValuesTooltip": "Compila con i valori filtro disponibili",
 
         "defaultFilter": "Filtro predefinito",
         "defaultFilterInfo": "Definisci un filtro da applicare quando non è selezionato nulla. Suggerimento: se vuoi non mostrare nulla quando non è selezionato nulla, crea un filtro che non restituisce mai feature",
@@ -2515,6 +2530,8 @@
         "valueFromAttributeDescription": "Recupera tutte le feature esistenti inclusi i possibili valori duplicati per l'attributo selezionato.",
         "missingParametersMessage": "Selezionare i campi richiesti per generare l'elenco dei filtri",
         "fetchError": "Impossibile recuperare i dati",
+        "unsupportedVariantMessage": "Variante filtro non supportata: {variant}.",
+        "sliderSingleItemError": "Il filtro con slider richiede almeno due valori selezionabili.",
         "noSelectableItems": "Nessun elemento filtro selezionabile.",
         "filters": "Filtri",
         "styles": "Stili",