diff --git a/packages/app/cypress/e2e/overview.cy.ts b/packages/app/cypress/e2e/overview.cy.ts
index 14519064..b0ccb786 100644
--- a/packages/app/cypress/e2e/overview.cy.ts
+++ b/packages/app/cypress/e2e/overview.cy.ts
@@ -37,6 +37,22 @@ const SCOPE_LINE = `${SCOPE_METRIC} · ${SCOPE_DIRECTION} · ${SOURCE_NOTE}`;
 const SCOPE_METRIC_ZH = '超大规模云（hyperscaler）成本';
 const SCOPE_DIRECTION_ZH = '↓ 越低越好';
 const SCOPE_LINE_ZH = `${SCOPE_METRIC_ZH} · ${SCOPE_DIRECTION_ZH} · ${SOURCE_NOTE_ZH}`;
+const OVERVIEW_TIERS = [30, 50, 75, 100, 150, 200] as const;
+
+function selectOverviewTier(tier: (typeof OVERVIEW_TIERS)[number]) {
+  const targetIndex = OVERVIEW_TIERS.indexOf(tier);
+  return cy.get<HTMLInputElement>('[data-testid="overview-tier-slider"]').then(([slider]) => {
+    const view = slider.ownerDocument.defaultView;
+    if (view === null) throw new Error('Slider has no window');
+    const nativeValueSetter = Object.getOwnPropertyDescriptor(
+      view.HTMLInputElement.prototype,
+      'value',
+    )?.set;
+    if (nativeValueSetter === undefined) throw new Error('Range input has no native value setter');
+    nativeValueSetter.call(slider, String(targetIndex));
+    slider.dispatchEvent(new view.Event('input', { bubbles: true }));
+  });
+}
 
 function expectNoHorizontalOverflow() {
   cy.document().then((doc) => {
@@ -137,14 +153,14 @@ describe('Overview page', () => {
         'preserved';
     });
 
-    cy.get('[data-testid="overview-tier-switcher"]').contains('a', '75').click();
+    selectOverviewTier(75);
     cy.wait('@overviewJson');
     cy.location('search', { timeout: 15_000 }).should('eq', '?tier=75');
     cy.window().its('__overviewNavigationSentinel').should('eq', 'preserved');
 
-    cy.get('[data-testid="overview-tier-switcher"]').contains('a', '50').click();
+    selectOverviewTier(50);
     cy.location('search').should('eq', '');
-    cy.get('[data-testid="overview-tier-switcher"]').contains('a', '75').click();
+    selectOverviewTier(75);
     cy.location('search').should('eq', '?tier=75');
     cy.then(() => {
       expect(jsonRequests, 'one request; both visited selections are cached').to.equal(1);
@@ -179,7 +195,7 @@ describe('Overview page', () => {
     cy.viewport(1280, 900);
     cy.visit('/overview');
     cy.intercept('GET', '**/api/v1/overview*').as('overviewJson');
-    cy.get('[data-testid="overview-tier-switcher"]').contains('a', '75').click();
+    selectOverviewTier(75);
     cy.wait('@overviewJson');
     cy.location('search').should('eq', '?tier=75');
 
@@ -205,7 +221,7 @@ describe('Overview page', () => {
     cy.viewport(1280, 900);
     cy.visit('/overview');
 
-    cy.get('[data-testid="overview-tier-switcher"]').contains('a', '75').click();
+    selectOverviewTier(75);
     cy.get('[data-testid="overview-engine-scope-switcher"]')
       .find('[data-overview-engine-scope="all"]')
       .click();
@@ -240,7 +256,7 @@ describe('Overview page', () => {
       );
     });
 
-    cy.get('[data-testid="overview-tier-switcher"]').contains('a', '75').click();
+    selectOverviewTier(75);
     cy.location('search').should('eq', '?tier=75&models=all');
     cy.get('[data-testid="overview-desktop-model"][data-model="gpt-oss-120b"]').should('exist');
 
@@ -284,22 +300,21 @@ describe('Overview page', () => {
       platform('b200').find('[data-testid="overview-cost-delta"]').should('exist');
     });
 
-    cy.get('[data-testid="overview-tier-switcher"]')
-      .contains('a', '100')
-      .should('have.attr', 'href', '/overview?tier=100&ref=b300');
+    selectOverviewTier(100);
+    cy.location('search').should('eq', '?tier=100&ref=b300');
     cy.get('[data-testid="overview-engine-scope-switcher"]')
       .find('[data-overview-engine-scope="all"]')
-      .should('have.attr', 'href', '/overview?engine=all&ref=b300');
+      .should('have.attr', 'href', '/overview?tier=100&engine=all&ref=b300');
     cy.get('[data-overview-comparison="history"]').should(
       'have.attr',
       'href',
-      '/overview?ref=b300&compare=30d',
+      '/overview?tier=100&ref=b300&compare=30d',
     );
     cy.get('[data-testid="language-toggle"]')
-      .should('have.attr', 'href', '/zh/overview?ref=b300')
+      .should('have.attr', 'href', '/zh/overview?tier=100&ref=b300')
       .click();
     cy.location('pathname').should('eq', '/zh/overview');
-    cy.location('search').should('eq', '?ref=b300');
+    cy.location('search').should('eq', '?tier=100&ref=b300');
     cy.get('[data-overview-comparison="hardware"]').should('contain.text', '对比 B300');
   });
 
@@ -345,17 +360,16 @@ describe('Overview page', () => {
     cy.get('[data-testid="overview-desktop-matrix"] thead').should('contain.text', 'B200');
     cy.get('[data-testid="overview-desktop-matrix"] thead').should('not.contain.text', 'Reference');
 
-    cy.get('[data-testid="overview-tier-switcher"]')
-      .contains('a', '100')
-      .should('have.attr', 'href', '/overview?tier=100&compare=30d');
+    selectOverviewTier(100);
+    cy.location('search').should('eq', '?tier=100&compare=30d');
     cy.get('[data-testid="overview-engine-scope-switcher"]')
       .find('[data-overview-engine-scope="all"]')
-      .should('have.attr', 'href', '/overview?engine=all&compare=30d');
+      .should('have.attr', 'href', '/overview?tier=100&engine=all&compare=30d');
     cy.get('[data-testid="language-toggle"]')
-      .should('have.attr', 'href', '/zh/overview?compare=30d')
+      .should('have.attr', 'href', '/zh/overview?tier=100&compare=30d')
       .click();
     cy.location('pathname').should('eq', '/zh/overview');
-    cy.location('search').should('eq', '?compare=30d');
+    cy.location('search').should('eq', '?tier=100&compare=30d');
     cy.get('[data-testid="overview-comparison-switcher"]')
       .should('have.attr', 'aria-label', '对比方式')
       .within(() => {
@@ -533,10 +547,7 @@ describe('Overview page', () => {
     ).click();
     cy.location('search').should('eq', '?engine=all');
     desktopModel('GLM-5.2').find('[data-testid="overview-pair-missing"]').should('have.length', 5);
-    cy.get('[data-testid="overview-tier-switcher"]')
-      .contains('a', '100')
-      .should('have.attr', 'href', '/overview?tier=100&engine=all')
-      .click();
+    selectOverviewTier(100);
     cy.location('search').should('eq', '?tier=100&engine=all');
 
     cy.get('[data-testid="overview-engine-scope-switcher"]')
@@ -956,7 +967,7 @@ describe('Overview page', () => {
       .should('not.match', /∞\s*%/);
   });
 
-  it('re-renders the whole matrix at the service level the URL names, via plain links', () => {
+  it('re-renders the whole matrix from the six-stop SLO slider', () => {
     cy.viewport(1280, 900);
     cy.visit('/overview');
 
@@ -966,22 +977,42 @@ describe('Overview page', () => {
       .and('contain.text', 'SLO');
     cy.get('body').should('not.contain.text', 'Service level');
     cy.get('[data-testid="overview-tier-switcher"]').within(() => {
-      cy.get('[aria-current="page"]').should('have.text', '50');
-      // 30 / 75 / 100 / 150 / 200 link out; the active 50 is inert text.
-      cy.get('a').should('have.length', 5);
-      cy.contains('a', '30').should('have.attr', 'href', '/overview?tier=30');
-      cy.contains('a', '150').should('have.attr', 'href', '/overview?tier=150');
-      cy.contains('a', '200').should('have.attr', 'href', '/overview?tier=200');
-      cy.contains('a', '100').should('have.attr', 'href', '/overview?tier=100').click();
+      cy.get('a, button').should('not.exist');
+      cy.get('[data-tier-option]').should('have.length', 6);
+      cy.get('[data-tier-option="50"]').should('have.attr', 'data-selected', 'true');
+      cy.get('[data-testid="overview-tier-ridge"]').should('have.length', 6);
+      cy.get('[data-tier-ridge="30"]').should('have.attr', 'data-state', 'filled');
+      cy.get('[data-tier-ridge="50"]').should('have.attr', 'data-state', 'selected');
+      cy.get('[data-tier-ridge="75"]').should('have.attr', 'data-state', 'unfilled');
+      cy.get('[data-testid="overview-tier-slider"]')
+        .should('have.attr', 'min', '0')
+        .and('have.attr', 'max', '5')
+        .and('have.attr', 'step', '1')
+        .and('have.value', '1')
+        .and('have.attr', 'data-tier', '50')
+        .and('have.attr', 'aria-valuetext', '50 tok/s/user');
     });
 
+    selectOverviewTier(100);
+
     cy.location('search').should('eq', '?tier=100');
     // The metric line never repeats the tier — the switcher states it.
     cy.get('[data-testid="overview-scope"]').should('have.text', SCOPE_LINE);
     cy.get('[data-testid="overview-tier-switcher"]').within(() => {
-      cy.get('[aria-current="page"]').should('have.text', '100');
-      cy.contains('a', '50').should('have.attr', 'href', '/overview');
+      cy.get('[data-tier-option="100"]').should('have.attr', 'data-selected', 'true');
+      cy.get('[data-tier-ridge="75"]').should('have.attr', 'data-state', 'filled');
+      cy.get('[data-tier-ridge="100"]').should('have.attr', 'data-state', 'selected');
+      cy.get('[data-tier-ridge="150"]').should('have.attr', 'data-state', 'unfilled');
+      cy.get('[data-testid="overview-tier-slider"]')
+        .should('have.attr', 'type', 'range')
+        .should('have.value', '3')
+        .and('have.attr', 'data-tier', '100')
+        .and('have.attr', 'aria-valuetext', '100 tok/s/user');
     });
+    selectOverviewTier(75);
+    cy.location('search').should('eq', '?tier=75');
+    selectOverviewTier(100);
+    cy.location('search').should('eq', '?tier=100');
 
     desktopModel('Qwen-3.5-397B-A17B', SINGLE_TURN).within(() => {
       platform('b200').should('contain.text', '$0.124').and('contain.text', 'FP8');
@@ -1328,7 +1359,10 @@ describe('Overview page', () => {
       .and('contain.text', 'SLO');
     cy.get('body').should('not.contain.text', '服务档位');
     cy.get('[data-testid="overview-tier-switcher"]').within(() => {
-      cy.contains('a', '50').should('have.attr', 'href', '/zh/overview');
+      cy.get('[data-testid="overview-tier-slider"]')
+        .should('have.attr', 'data-tier', '100')
+        .and('have.attr', 'aria-valuetext', '100 tok/s/用户');
+      cy.get('[data-tier-option]').should('have.length', 6);
     });
   });
 });
diff --git a/packages/app/src/components/overview/overview-scorecard.tsx b/packages/app/src/components/overview/overview-scorecard.tsx
index a52afc8b..42054358 100644
--- a/packages/app/src/components/overview/overview-scorecard.tsx
+++ b/packages/app/src/components/overview/overview-scorecard.tsx
@@ -1,7 +1,6 @@
 import {
   OVERVIEW_DEFAULT_REFERENCE_HARDWARE,
   OVERVIEW_HARDWARE,
-  OVERVIEW_TIERS,
   overviewHardwareLabel,
   type OverviewComparisonMode,
   type OverviewEngineScope,
@@ -18,13 +17,13 @@ import {
   detailHref,
   overviewEngineScopeHref,
   overviewHref,
-  overviewTierHref,
 } from '@/lib/overview-links';
 
 import { OverviewDetailLink } from './overview-detail-link';
 import { OverviewHistoryDetailLink } from './overview-history-detail-link';
 import { OverviewNavLink } from './overview-nav-link';
 import { OverviewReferenceSelect } from './overview-reference-select';
+import { OverviewTierSlider } from './overview-tier-slider';
 
 export type OverviewLocale = 'en' | 'zh';
 
@@ -803,8 +802,7 @@ export function MobileOverviewList({
   );
 }
 
-/** Every option remains a copyable server-rendered URL; ordinary clicks use a
- *  soft App Router transition and the displayed tier is never a self-link. */
+/** The six benchmarked service levels are exposed as discrete slider stops. */
 export function OverviewTierSwitcher({
   tier,
   engineScope,
@@ -822,46 +820,17 @@ export function OverviewTierSwitcher({
   locale: OverviewLocale;
   strings: OverviewStrings;
 }) {
-  const optionClass = 'inline-flex min-h-11 items-center px-3 tabular-nums';
   return (
-    <nav
-      data-testid="overview-tier-switcher"
-      aria-label={strings.tierNavLabel}
-      className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs"
-    >
-      <span className="text-muted-foreground">{strings.tierNavLabel}</span>
-      <div className="flex divide-x divide-border/60 overflow-hidden rounded-md border border-border/60">
-        {OVERVIEW_TIERS.map((option) =>
-          option === tier ? (
-            <span
-              key={option}
-              aria-current="page"
-              className={`${optionClass} bg-foreground font-semibold text-background`}
-            >
-              {option}
-            </span>
-          ) : (
-            <OverviewNavLink
-              key={option}
-              href={overviewTierHref(
-                locale,
-                option,
-                engineScope,
-                comparisonMode,
-                referenceHardware,
-                modelScope,
-              )}
-              analytics={{ control: 'tier', value: String(option) }}
-              searchKeys={['tier']}
-              className={`${optionClass} text-muted-foreground transition-colors hover:bg-muted hover:text-foreground`}
-            >
-              {option}
-            </OverviewNavLink>
-          ),
-        )}
-      </div>
-      <span className="text-muted-foreground">{strings.tierUnit}</span>
-    </nav>
+    <OverviewTierSlider
+      tier={tier}
+      engineScope={engineScope}
+      comparisonMode={comparisonMode}
+      referenceHardware={referenceHardware}
+      modelScope={modelScope}
+      locale={locale}
+      label={strings.tierNavLabel}
+      unit={strings.tierUnit}
+    />
   );
 }
 
diff --git a/packages/app/src/components/overview/overview-tier-slider.tsx b/packages/app/src/components/overview/overview-tier-slider.tsx
new file mode 100644
index 00000000..9b35d0ec
--- /dev/null
+++ b/packages/app/src/components/overview/overview-tier-slider.tsx
@@ -0,0 +1,171 @@
+'use client';
+
+import { type ChangeEvent, useEffect, useRef, useState } from 'react';
+
+import { track } from '@/lib/analytics';
+import {
+  OVERVIEW_TIERS,
+  type OverviewComparisonMode,
+  type OverviewEngineScope,
+  type OverviewModelScope,
+  type OverviewReferenceHardware,
+  type OverviewTier,
+} from '@/lib/overview-data';
+import { overviewTierHref } from '@/lib/overview-links';
+
+import { useOverviewNavigation } from './overview-navigation';
+
+interface OverviewTierSliderProps {
+  tier: OverviewTier;
+  engineScope: OverviewEngineScope;
+  comparisonMode: OverviewComparisonMode;
+  referenceHardware: OverviewReferenceHardware;
+  modelScope: OverviewModelScope;
+  locale: 'en' | 'zh';
+  label: string;
+  unit: string;
+}
+
+function tierIndex(tier: OverviewTier): number {
+  return OVERVIEW_TIERS.indexOf(tier);
+}
+
+export function OverviewTierSlider({
+  tier,
+  engineScope,
+  comparisonMode,
+  referenceHardware,
+  modelScope,
+  locale,
+  label,
+  unit,
+}: OverviewTierSliderProps) {
+  const navigation = useOverviewNavigation();
+  const pointerActive = useRef(false);
+  const committedIndex = useRef(tierIndex(tier));
+  const [selectedIndex, setSelectedIndex] = useState(() => tierIndex(tier));
+
+  useEffect(() => {
+    const index = tierIndex(tier);
+    committedIndex.current = index;
+    setSelectedIndex(index);
+  }, [tier]);
+
+  const selectedTier = OVERVIEW_TIERS[selectedIndex];
+  const progress = (selectedIndex / (OVERVIEW_TIERS.length - 1)) * 100;
+
+  const commit = (index: number) => {
+    const nextTier = OVERVIEW_TIERS[index];
+    if (index === committedIndex.current) return;
+    committedIndex.current = index;
+
+    track('overview_selector_changed', {
+      control: 'tier',
+      value: String(nextTier),
+    });
+    navigation.push(
+      overviewTierHref(
+        locale,
+        nextTier,
+        engineScope,
+        comparisonMode,
+        referenceHardware,
+        modelScope,
+      ),
+      ['tier'],
+    );
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const nextIndex = Number(event.currentTarget.value);
+    setSelectedIndex(nextIndex);
+    if (!pointerActive.current) commit(nextIndex);
+  };
+
+  return (
+    <nav
+      data-testid="overview-tier-switcher"
+      aria-label={label}
+      className="flex min-w-0 items-center gap-3 text-xs"
+    >
+      <span className="shrink-0 text-muted-foreground">{label}</span>
+      <div className="w-[min(18rem,calc(100vw-8.5rem))] min-w-0 pt-1">
+        <div className="relative h-4">
+          <input
+            data-testid="overview-tier-slider"
+            type="range"
+            min={0}
+            max={OVERVIEW_TIERS.length - 1}
+            step={1}
+            value={selectedIndex}
+            aria-label={label}
+            aria-valuetext={`${selectedTier} ${unit}`}
+            data-tier={selectedTier}
+            onChange={handleChange}
+            onPointerDown={() => {
+              pointerActive.current = true;
+            }}
+            onPointerUp={(event) => {
+              pointerActive.current = false;
+              commit(Number(event.currentTarget.value));
+            }}
+            onPointerCancel={() => {
+              pointerActive.current = false;
+              setSelectedIndex(tierIndex(tier));
+            }}
+            className="absolute top-1/2 z-10 h-1.5 w-full -translate-y-1/2 cursor-pointer appearance-none rounded-full bg-border accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background [&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-foreground [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:cursor-grab [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-background [&::-moz-range-thumb]:bg-foreground [&::-moz-range-thumb]:shadow-sm [&::-moz-range-thumb]:active:cursor-grabbing [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-background [&::-webkit-slider-thumb]:bg-foreground [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:active:cursor-grabbing"
+            style={{
+              background: `linear-gradient(to right, var(--foreground) 0%, var(--foreground) ${progress}%, var(--border) ${progress}%, var(--border) 100%)`,
+            }}
+          />
+          <div
+            data-testid="overview-tier-ridges"
+            className="pointer-events-none absolute inset-0 z-20"
+            aria-hidden="true"
+          >
+            {OVERVIEW_TIERS.map((option, index) => {
+              const state =
+                index === selectedIndex
+                  ? 'selected'
+                  : index < selectedIndex
+                    ? 'filled'
+                    : 'unfilled';
+              return (
+                <span
+                  key={option}
+                  data-testid="overview-tier-ridge"
+                  data-tier-ridge={option}
+                  data-state={state}
+                  className={`absolute top-1/2 h-2 w-0.5 -translate-x-1/2 -translate-y-1/2 rounded-full ${
+                    state === 'selected'
+                      ? 'opacity-0'
+                      : state === 'filled'
+                        ? 'bg-background/70'
+                        : 'bg-foreground/35'
+                  }`}
+                  style={{ left: `${(index / (OVERVIEW_TIERS.length - 1)) * 100}%` }}
+                />
+              );
+            })}
+          </div>
+        </div>
+        <div className="relative mt-1 h-4 tabular-nums" aria-hidden="true">
+          {OVERVIEW_TIERS.map((option, index) => (
+            <span
+              key={option}
+              data-tier-option={option}
+              data-selected={option === selectedTier ? 'true' : undefined}
+              className={`absolute -translate-x-1/2 ${
+                option === selectedTier ? 'font-semibold text-foreground' : 'text-muted-foreground'
+              }`}
+              style={{ left: `${(index / (OVERVIEW_TIERS.length - 1)) * 100}%` }}
+            >
+              {option}
+            </span>
+          ))}
+        </div>
+      </div>
+      <span className="shrink-0 text-muted-foreground">{unit}</span>
+    </nav>
+  );
+}