diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index 5dd20659..1e1ca977 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -441,6 +441,10 @@ const DateRangeFilterControls = ({
   const { error: maxError } = getFieldState('max', formState);
   const dispatch = useAppDispatch();
   const sliderTimeout = useRef<number>();
+  const [sliderPosition, setSliderPosition] = useState<[string, string]>([
+    values.min,
+    values.max,
+  ]);
 
   const setFilterRange = () => {
     const validState = getValues();
@@ -471,6 +475,21 @@ const DateRangeFilterControls = ({
     setFilterRange();
   });
 
+  useEffect(() => {
+    //Set slider position from values
+    setSliderPosition([values.min, values.max]);
+  }, [values.min, values.max]);
+
+  const [filterMin, filterMax] = [filter.min_value, filter.max_value];
+  useEffect(() => {
+    //Clear when the filter is cleared
+    if (!filter.value) {
+      setValue('min', formatDate(filterMin));
+      setValue('max', formatDate(filterMax));
+      setSliderPosition([formatDate(filterMin), formatDate(filterMax)]);
+    }
+  }, [filter.value, filterMax, filterMin, setValue]);
+
   return (
     <Stack>
       <Stack direction="row" spacing={2}>
@@ -499,9 +518,10 @@ const DateRangeFilterControls = ({
         size="small"
         disableSwap
         getAriaLabel={() => `filter range for column ${column}`}
-        value={[parseDate(values.min), parseDate(values.max)]}
+        value={sliderPosition.map(parseDate)}
         min={filter.min_value}
         max={filter.max_value}
+        step={(filter.max_value - filter.min_value) / 100}
         valueLabelFormat={formatDate}
         marks={[filter.min_value, filter.max_value].map((v) => ({
           value: v,
@@ -511,11 +531,14 @@ const DateRangeFilterControls = ({
           const range = newValue as [number, number];
           setValue('min', formatDate(range[0]));
           setValue('max', formatDate(range[1]));
-          // Debounce setting the filter state from the slider for better UX
-          if (sliderTimeout.current) clearTimeout(sliderTimeout.current);
-          sliderTimeout.current = window.setTimeout(() => {
-            submit();
-          }, 100);
+          const sliderRange: [string, string] = [
+            formatDate(range[0]),
+            formatDate(range[1]),
+          ];
+          setSliderPosition(sliderRange);
+          const thisTimeout = (sliderTimeout.current = window.setTimeout(() => {
+            if (sliderTimeout.current === thisTimeout) submit();
+          }, 100));
         }}
         valueLabelDisplay="auto"
       />
@@ -552,6 +575,10 @@ const RangeFilterControls = ({
   const { error: maxError } = getFieldState('max', formState);
   const dispatch = useAppDispatch();
   const sliderTimeout = useRef<number>();
+  const [sliderPosition, setSliderPosition] = useState<[number, number]>([
+    values.min,
+    values.max,
+  ]);
 
   const setFilterRange = () => {
     const validState = getValues();
@@ -582,6 +609,21 @@ const RangeFilterControls = ({
     setFilterRange();
   });
 
+  useEffect(() => {
+    //Set slider position from values
+    setSliderPosition([values.min, values.max]);
+  }, [values.min, values.max]);
+
+  const [filterMin, filterMax] = [filter.min_value, filter.max_value];
+  useEffect(() => {
+    //Clear when the filter is cleared
+    if (!filter.value) {
+      setValue('min', filterMin);
+      setValue('max', filterMax);
+      setSliderPosition([filterMin, filterMax]);
+    }
+  }, [filter.value, filterMax, filterMin, setValue]);
+
   return (
     <Stack>
       <Stack direction="row" spacing={2}>
@@ -614,9 +656,14 @@ const RangeFilterControls = ({
         size="small"
         disableSwap
         getAriaLabel={() => `filter range for column ${column}`}
-        value={[values.min, values.max]}
+        value={sliderPosition}
         min={filter.min_value}
         max={filter.max_value}
+        step={
+          filter.type === 'int'
+            ? 1
+            : (filter.max_value - filter.min_value) / 100
+        }
         marks={[filter.min_value, filter.max_value].map((v) => ({
           value: v,
           label: v,
@@ -625,11 +672,10 @@ const RangeFilterControls = ({
           const range = newValue as [number, number];
           setValue('min', range[0]);
           setValue('max', range[1]);
-          // Debounce setting the filter state from the slider for better UX
-          if (sliderTimeout.current) clearTimeout(sliderTimeout.current);
-          sliderTimeout.current = window.setTimeout(() => {
-            submit();
-          }, 100);
+          setSliderPosition([range[0], range[1]]);
+          const thisTimeout = (sliderTimeout.current = window.setTimeout(() => {
+            if (sliderTimeout.current === thisTimeout) submit();
+          }, 100));
         }}
         valueLabelDisplay="auto"
       />