diff --git a/site/gatsby-site/gatsby-node.js b/site/gatsby-site/gatsby-node.js
index a24c0455b7..cffa7e5dee 100644
--- a/site/gatsby-site/gatsby-node.js
+++ b/site/gatsby-site/gatsby-node.js
@@ -34,6 +34,8 @@ const createBlogPages = require('./page-creators/createBlogPages');
 
 const createDocPages = require('./page-creators/createDocPages');
 
+const createDiscoverPage = require('./page-creators/createDiscoverPage');
+
 const algoliasearch = require('algoliasearch');
 
 const Translator = require('./src/utils/Translator');
@@ -75,6 +77,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   });
 
   for (const pageCreator of [
+    createDiscoverPage,
     createBlogPages,
     createCitationPages,
     createWordCountsPages,
diff --git a/site/gatsby-site/page-creators/createDiscoverPage.js b/site/gatsby-site/page-creators/createDiscoverPage.js
new file mode 100644
index 0000000000..b7cdc49e55
--- /dev/null
+++ b/site/gatsby-site/page-creators/createDiscoverPage.js
@@ -0,0 +1,43 @@
+const path = require('path');
+
+const createDiscoverPage = async (graphql, createPage) => {
+  const pageQuery = await graphql(`
+    query DiscoverPageQuery {
+      reports: allMongodbAiidprodReports {
+        nodes {
+          report_number
+          date_published
+        }
+      }
+    }
+  `);
+
+  const reports = pageQuery.data.reports?.nodes;
+
+  const numBins = 16;
+
+  const histogramBins = new Array(numBins).fill().map(() => 0);
+
+  const publishDates = reports.map((report) => new Date(report.date_published));
+
+  const latestPublishDate = Math.max(...publishDates);
+
+  const earliestPublishDate = Math.min(...publishDates);
+
+  for (const publishDate of publishDates) {
+    const position =
+      (publishDate - earliestPublishDate) / (latestPublishDate - earliestPublishDate);
+
+    const index = Math.round(position * (histogramBins.length - 1));
+
+    histogramBins[index] += 1;
+  }
+
+  createPage({
+    path: '/apps/discover/',
+    component: path.resolve('./src/templates/discover.js'),
+    context: { histogramBins },
+  });
+};
+
+module.exports = createDiscoverPage;
diff --git a/site/gatsby-site/playwright/e2e/discover.spec.ts b/site/gatsby-site/playwright/e2e/discover.spec.ts
index 79ffb09705..c58ecd37d2 100644
--- a/site/gatsby-site/playwright/e2e/discover.spec.ts
+++ b/site/gatsby-site/playwright/e2e/discover.spec.ts
@@ -10,7 +10,7 @@ import config from '../../config';
 
 test.describe('The Discover app', () => {
     const url = '/apps/discover';
-
+  
     test('Successfully loads', async ({ page }) => {
         await page.goto(url);
     });
@@ -503,4 +503,20 @@ test.describe('The Discover app', () => {
             await expect(count).toBeGreaterThanOrEqual(0);
         }).toPass();
     });
+
+    test('Should select date range', async ({ page }) => {
+      await page.goto(url);
+
+      await page.locator('[data-cy="epoch_date_published"]').first().click();
+
+      const rangeKnobSelector = '[data-cy="epoch_date_published"] [data-cy="range-knob"]';
+
+      await page.locator(rangeKnobSelector).first().focus();
+
+      await page.locator(rangeKnobSelector).first().press('ArrowRight');
+      
+      await page.locator(rangeKnobSelector).first().press('ArrowRight');
+
+      await expect(page).toHaveURL(/.*epoch_date_published_min.*/g); 
+    });
 });
diff --git a/site/gatsby-site/src/components/discover/Controls.js b/site/gatsby-site/src/components/discover/Controls.js
index fc2c2ecf0f..110c3c3d7d 100644
--- a/site/gatsby-site/src/components/discover/Controls.js
+++ b/site/gatsby-site/src/components/discover/Controls.js
@@ -12,7 +12,7 @@ import { Trans } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons';
 
-const Controls = () => {
+const Controls = ({ histogramBins }) => {
   const { indexUiState } = useInstantSearch();
 
   const [expandFilters, setExpandFilters] = useState(false);
@@ -75,7 +75,7 @@ const Controls = () => {
 
       <div className="basis-full order-3" />
 
-      <Filters {...{ expandFilters }} />
+      <Filters {...{ expandFilters, histogramBins }} />
     </div>
   );
 };
diff --git a/site/gatsby-site/src/components/discover/Discover.js b/site/gatsby-site/src/components/discover/Discover.js
index 24a2cfc1f2..bf2c5c2713 100644
--- a/site/gatsby-site/src/components/discover/Discover.js
+++ b/site/gatsby-site/src/components/discover/Discover.js
@@ -30,7 +30,7 @@ function mapping() {
   };
 }
 
-export default function Discover() {
+export default function Discover({ histogramBins }) {
   const { locale } = useLocalization();
 
   const [indexName] = useState(`instant_search-${locale}-featured`);
@@ -114,7 +114,7 @@ export default function Discover() {
           </Col>
         </Row>
 
-        {width > 767 ? <Controls /> : <OptionsModal />}
+        {width > 767 ? <Controls {...{ histogramBins }} /> : <OptionsModal />}
 
         <Hits />
 
diff --git a/site/gatsby-site/src/components/discover/Filter.js b/site/gatsby-site/src/components/discover/Filter.js
index 7a82cf0bec..250c208dbe 100644
--- a/site/gatsby-site/src/components/discover/Filter.js
+++ b/site/gatsby-site/src/components/discover/Filter.js
@@ -54,7 +54,7 @@ function ToggleContent({ label, touched, faIcon, toggled, accordion = false }) {
   );
 }
 
-function ButtonToggle({ label, faIcon, touched, type, filterProps }) {
+function ButtonToggle({ label, faIcon, touched, type, filterProps, histogramBins }) {
   const [toggled, setToggled] = useState(true);
 
   const toggleDropdown = () => {
@@ -105,20 +105,20 @@ function ButtonToggle({ label, faIcon, touched, type, filterProps }) {
           toggled ? 'hidden' : 'block '
         } bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700`}
       >
-        <FilterOverlay type={type} filterProps={filterProps} />
+        <FilterOverlay {...{ type, filterProps, histogramBins }} />
       </div>
     </div>
   );
 }
 
-function FilterContent({ type, filterProps }) {
+function FilterContent({ type, filterProps, histogramBins }) {
   const { default: Component } = componentsMap[type];
 
-  return <Component {...filterProps} />;
+  return <Component {...filterProps} {...{ histogramBins }} />;
 }
 
 const FilterOverlay = React.forwardRef(function Container(
-  { type, filterProps, ...overlayProps },
+  { histogramBins, type, filterProps, ...overlayProps },
   ref
 ) {
   return (
@@ -131,14 +131,14 @@ const FilterOverlay = React.forwardRef(function Container(
     >
       <Card className="shadow-lg card">
         <div>
-          <FilterContent type={type} filterProps={filterProps} />
+          <FilterContent {...{ type, filterProps, histogramBins }} />
         </div>
       </Card>
     </div>
   );
 });
 
-export default function Filter({ type, ...filterProps }) {
+export default function Filter({ type, histogramBins, ...filterProps }) {
   const { label, faIcon, attribute } = filterProps;
 
   const { touchedCount } = componentsMap[type];
@@ -149,13 +149,7 @@ export default function Filter({ type, ...filterProps }) {
 
   return (
     <>
-      <ButtonToggle
-        label={label}
-        faIcon={faIcon}
-        touched={touched}
-        type={type}
-        filterProps={filterProps}
-      />
+      <ButtonToggle {...{ label, faIcon, touched, type, filterProps, histogramBins }} />
     </>
   );
 }
diff --git a/site/gatsby-site/src/components/discover/Filters.js b/site/gatsby-site/src/components/discover/Filters.js
index e8d3d81b1e..267ead7bbf 100644
--- a/site/gatsby-site/src/components/discover/Filters.js
+++ b/site/gatsby-site/src/components/discover/Filters.js
@@ -3,7 +3,7 @@ import REFINEMENT_LISTS from 'components/discover/REFINEMENT_LISTS';
 import Filter from './Filter';
 import { graphql, useStaticQuery } from 'gatsby';
 
-function Filters({ expandFilters }) {
+function Filters({ expandFilters, histogramBins }) {
   const {
     taxa: { nodes: taxa },
   } = useStaticQuery(graphql`
@@ -44,7 +44,7 @@ function Filters({ expandFilters }) {
         }
         return (
           <div key={list.attribute} className={className} data-cy={list.attribute}>
-            <Filter className="w-full" type={list.type} taxa={taxa} {...list} />
+            <Filter className="w-full" type={list.type} {...{ histogramBins, taxa, ...list }} />
           </div>
         );
       })}
diff --git a/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js b/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
index b183b392ef..5fc4b4c711 100644
--- a/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
+++ b/site/gatsby-site/src/components/discover/filterTypes/RangeInput.js
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useRange } from 'react-instantsearch';
 import { Trans } from 'react-i18next';
 import { debounce } from 'debounce';
-import { Button } from 'flowbite-react';
+import { Button, Checkbox } from 'flowbite-react';
 import { Form, Formik } from 'formik';
 import Label from 'components/forms/Label';
 import TextInputGroup from 'components/forms/TextInputGroup';
@@ -13,7 +13,7 @@ const formatDate = (epoch) => new Date(epoch * 1000).toISOString().substr(0, 10)
 
 const dateToEpoch = (date) => new Date(date).getTime() / 1000;
 
-export default function RangeInput({ attribute }) {
+export default function RangeInput({ attribute, histogramBins }) {
   const {
     range: { min, max },
     start,
@@ -53,6 +53,16 @@ export default function RangeInput({ attribute }) {
         {({ values, errors, touched, handleBlur }) => (
           <>
             <Form className="px-3">
+              <DoubleRangeSlider
+                globalMin={min}
+                globalMax={max}
+                selectionMin={currentRefinement.min}
+                selectionMax={currentRefinement.max}
+                setSelection={debounce((min, max) => {
+                  onChange({ min, max });
+                }, 1000)}
+                {...{ histogramBins, attribute }}
+              />
               <FieldContainer>
                 <Label>
                   <Trans>From Date</Trans>:
@@ -135,6 +145,269 @@ export default function RangeInput({ attribute }) {
   );
 }
 
+const proportionToPercent = (proportion) => 100 * proportion + '%';
+
+const sliderHeight = '1rem';
+
+const DoubleRangeSlider = ({
+  globalMin,
+  globalMax,
+  selectionMin,
+  selectionMax,
+  setSelection,
+  histogramBins,
+  attribute,
+}) => {
+  const proportionToTimestamp = (value) => globalMin + (globalMax - globalMin) * value;
+
+  const [lowerBound, bareSetLowerBound] = useState(proportionToTimestamp(selectionMin));
+
+  const [upperBound, bareSetUpperBound] = useState(proportionToTimestamp(selectionMax));
+
+  const setLowerBound = (value) => {
+    bareSetLowerBound(value);
+    setSelection(proportionToTimestamp(value), proportionToTimestamp(upperBound));
+  };
+
+  const setUpperBound = (value) => {
+    bareSetUpperBound(value);
+    setSelection(proportionToTimestamp(lowerBound), proportionToTimestamp(value));
+  };
+
+  const binsMax = Math.max(...histogramBins);
+
+  useEffect(() => {
+    setUpperBound((selectionMax - globalMin) / (globalMax - globalMin));
+  }, [selectionMax, globalMax, globalMin]);
+
+  const [logScale, setLogScale] = useState(true);
+
+  const numTicks = 20;
+
+  return (
+    <>
+      <div className="mb-2">
+        <Checkbox
+          id={`${attribute}-log-scale`}
+          checked={logScale ? true : undefined}
+          onClick={() => setLogScale((logScale) => !logScale)}
+          className="mr-1"
+        />
+        <label htmlFor={`${attribute}-log-scale`}>Log Scale</label>
+      </div>
+      <div className="h-32 w-full bg-gray-100 relative">
+        <div className="h-full w-full absolute inset-0">
+          {Array(numTicks)
+            .fill()
+            .map((_, i) => {
+              const proportion = logScale
+                ? Math.log((i * binsMax) / numTicks) / Math.log(binsMax)
+                : (i * binsMax) / numTicks / binsMax;
+
+              return (
+                <div
+                  key={i}
+                  className="w-full h-px bg-gray-200 absolute"
+                  style={{ bottom: proportionToPercent(proportion) }}
+                />
+              );
+            })}
+        </div>
+        <div className="flex items-end w-full h-full absolute inset-0">
+          {histogramBins.map((bin, i) => {
+            const rangeWidth = globalMax - globalMin;
+
+            const dateRangeStart = globalMin + (i * rangeWidth) / histogramBins.length;
+
+            const dateRangeEnd = globalMin + ((i + 1) * rangeWidth) / histogramBins.length;
+
+            const baseProportion = bin / binsMax;
+
+            const logProportion = Math.log(bin) / Math.log(binsMax);
+
+            const proportion = logScale ? logProportion : baseProportion;
+
+            return (
+              <div
+                key={i}
+                title={`${bin} reports from ${formatDate(dateRangeStart)} to ${formatDate(
+                  dateRangeEnd
+                )}`}
+                className={`border-1 border-white ${
+                  (i + 1) / histogramBins.length >= lowerBound &&
+                  i / histogramBins.length <= upperBound
+                    ? 'bg-blue-500'
+                    : 'bg-gray-700'
+                }`}
+                style={{
+                  width: proportionToPercent(1 / histogramBins.length),
+                  height: proportionToPercent(proportion),
+                }}
+              />
+            );
+          })}
+        </div>
+      </div>
+      <div className="relative bg-gray-200" style={{ height: sliderHeight }}>
+        <div
+          className="bg-blue-600 h-full absolute"
+          style={{
+            left: `calc(${proportionToPercent(lowerBound)})`,
+            width: proportionToPercent(upperBound - lowerBound),
+          }}
+        />
+
+        <SliderKnob
+          bound={lowerBound}
+          setBound={setLowerBound}
+          ceiling={upperBound}
+          {...{ proportionToTimestamp }}
+        />
+        <SliderKnob
+          bound={upperBound}
+          setBound={setUpperBound}
+          floor={lowerBound}
+          {...{ proportionToTimestamp }}
+        />
+      </div>
+    </>
+  );
+};
+
+const SliderKnob = ({ bound, setBound, ceiling = 1, floor = 0, proportionToTimestamp }) => {
+  const [dragOffset, setDragOffset] = useState(null);
+
+  const [handlePosition, setHandlePosition] = useState({
+    top: '0px',
+    left: proportionToPercent(bound),
+  });
+
+  const knobRef = useRef();
+
+  useEffect(() => {
+    if (dragOffset) {
+      knobRef.current.focus();
+    }
+  });
+
+  useEffect(() => {
+    setHandlePosition({
+      top: '0px',
+      left: proportionToPercent(bound),
+    });
+  }, [bound]);
+
+  const updatePosition = (event) => {
+    if (dragOffset) {
+      const parentClientRect = event.target.parentNode.getBoundingClientRect();
+
+      const handleLeftPx = event.clientX - parentClientRect.x - dragOffset.x;
+
+      setHandlePosition({
+        top: event.clientY - parentClientRect.y - dragOffset.y + 'px',
+        left: handleLeftPx + 'px',
+      });
+
+      const handleLeftPercent = handleLeftPx / parentClientRect.width;
+
+      const newBound = clamp(handleLeftPercent, { floor, ceiling });
+
+      setBound(newBound);
+
+      return newBound;
+    }
+  };
+
+  return (
+    <>
+      <button
+        data-cy="range-knob"
+        ref={knobRef}
+        className="rounded-full bg-white absolute focus:border-2 border-blue-500 flex items-center justify-center"
+        style={{
+          height: sliderHeight,
+          width: sliderHeight,
+          left: `calc(${proportionToPercent(bound)} - calc(${sliderHeight} / 2))`,
+        }}
+        onKeyDown={(event) => {
+          if (event.key == 'ArrowLeft') {
+            const newBound = clamp(bound - 0.1, { floor, ceiling });
+
+            setBound(newBound);
+            setDragOffset(null);
+            setHandlePosition({
+              top: '0px',
+              left: proportionToPercent(newBound),
+            });
+          }
+          if (event.key == 'ArrowRight') {
+            const newBound = clamp(bound + 0.1, { floor, ceiling });
+
+            setBound(newBound);
+            setDragOffset(null);
+            setHandlePosition({
+              top: '0px',
+              left: proportionToPercent(newBound),
+            });
+          }
+        }}
+      >
+        <div className="mt-10 text-center pointer-events-none">
+          {![null, NaN, undefined].includes(bound)
+            ? formatDate(proportionToTimestamp(bound)).substr(0, 4)
+            : ''}
+        </div>
+      </button>
+
+      {/* This "handle" element moves with the cursor
+       * so that we track the mouse position
+       * while the knob is being dragged.
+       * Then we move the knob to match the handle in the x-axis.
+       */}
+      <button
+        tabIndex="-1"
+        data-cy="range-knob-handle"
+        className="rounded-full absolute x-10"
+        onClick={() => {
+          knobRef.current.focus();
+        }}
+        onMouseDown={(event) => {
+          const clientRect = event.target.getBoundingClientRect();
+
+          const offset = { x: event.clientX - clientRect.x, y: event.clientY - clientRect.y };
+
+          setDragOffset(offset);
+        }}
+        onMouseUp={() => {
+          setDragOffset(null);
+          setHandlePosition({
+            // TODO: It would be more efficient to use translate()
+            // so as to trigger fewer re-layouts.
+            top: '0px',
+            left: proportionToPercent(bound),
+          });
+        }}
+        onMouseMove={(event) => {
+          updatePosition(event);
+        }}
+        style={{
+          height: sliderHeight,
+          width: sliderHeight,
+          ...handlePosition,
+          ...(dragOffset
+            ? // We enlarge the handle during movement
+              // so that moving the cursor real fast doesn't take it outside the div
+              // before an update occurs.
+              { scale: '100', transformOrigin: 'center' }
+            : { left: `calc(${handlePosition.left} - calc(${sliderHeight} / 2))` }),
+        }}
+      />
+    </>
+  );
+};
+
+const clamp = (value, { floor, ceiling }) => Math.max(Math.min(value, ceiling), floor);
+
 export const touchedCount = ({ searchState, attribute }) =>
   searchState?.range?.[attribute]?.split(':')[0] || searchState?.range?.[attribute]?.split(':')[1]
     ? 1
diff --git a/site/gatsby-site/src/pages/apps/discover.js b/site/gatsby-site/src/templates/discover.js
similarity index 83%
rename from site/gatsby-site/src/pages/apps/discover.js
rename to site/gatsby-site/src/templates/discover.js
index 89f9212847..eb211f8895 100644
--- a/site/gatsby-site/src/pages/apps/discover.js
+++ b/site/gatsby-site/src/templates/discover.js
@@ -3,10 +3,12 @@ import HeadContent from 'components/HeadContent';
 import Discover from 'components/discover/Discover';
 import { useTranslation } from 'react-i18next';
 
-function DiscoverApp() {
+function DiscoverApp({ pageContext }) {
+  const { histogramBins } = pageContext;
+
   return (
     <div className="w-full">
-      <Discover />
+      <Discover {...{ histogramBins }} />
     </div>
   );
 }