diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 33f4086..59e47ad 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -5,13 +5,15 @@
 
   export interface Props {
     file: File | undefined;
+    trimSliderOpen: boolean;
   }
 </script>
 
 <script lang="ts">
-  let { file = $bindable() }: Props = $props();
+  let { file = $bindable(), trimSliderOpen = $bindable() }: Props = $props();
 
   const closeRide = () => (file = undefined);
+  const toggleTrimSlider = () => (trimSliderOpen = !trimSliderOpen);
 </script>
 
 <div class="fixed z-[9000] h-[calc(var(--header-height)+1000px)] top-[-1000px] left-0 right-0 bg-slate-950">
@@ -30,6 +32,9 @@
   </h1>
   {#if file}
     <Button data-testid="close-ride-button" onclick={closeRide}>close ride</Button>
+    <div class="hidden wide:block">
+      <Button onclick={toggleTrimSlider}>trim</Button>
+    </div>
   {/if}
   <Button onclick={() => (settings.open = true)}>configure</Button>
 </header>
diff --git a/src/components/Map.svelte b/src/components/Map.svelte
index f33d3b6..f648610 100644
--- a/src/components/Map.svelte
+++ b/src/components/Map.svelte
@@ -29,6 +29,8 @@
     gpsPoints,
     gpsGaps,
     pointsOfInterest,
+    trimStart,
+    trimEnd,
   }: Props = $props();
 
   let node = $state<HTMLDivElement | undefined>();
@@ -36,7 +38,9 @@
   let basePolyline = $state<SegmentedPolyline | null>(null);
   let segmentModalOpen = $state(false);
   let hiddenRideSegments = $state<Set<number>>(new Set());
-  let polylineSegments = $derived(computeSegmentedLines(gpsGaps, gpsPoints.length, hiddenRideSegments));
+  let polylineSegments = $derived(
+    computeSegmentedLines(gpsGaps, gpsPoints.length, hiddenRideSegments, trimStart, trimEnd),
+  );
   let rideSegments = $derived<Set<number>>(new Set(polylineSegments.map((s) => s.segmentIdx)));
 
   $effect(() => {
@@ -90,11 +94,18 @@
       }
     });
 
-    // ensure this is updated each time the visible rows change
+    // ensure this is updated each time the visible rows or trim range change
     visibleRows;
 
-    basePolyline = getBaseLine(gpsPoints, gpsGaps, hiddenRideSegments).addTo(map!);
-    travelledPolyline = getTravelledLine(gpsPoints, gpsGaps, selectedRowIndex, hiddenRideSegments).addTo(map!);
+    basePolyline = getBaseLine(gpsPoints, gpsGaps, hiddenRideSegments, trimStart, trimEnd).addTo(map!);
+    travelledPolyline = getTravelledLine(
+      gpsPoints,
+      gpsGaps,
+      selectedRowIndex,
+      hiddenRideSegments,
+      trimStart,
+      trimEnd,
+    ).addTo(map!);
   });
 
   function setVisibleIndices() {
@@ -107,6 +118,11 @@
         ? new Array(gpsPoints.length).fill(true)
         : gpsPoints.map((point) => bounds.contains(point));
 
+    // apply trim range
+    for (let i = 0; i < newVisiblePoints.length; i++) {
+      if (i < trimStart || i > trimEnd) newVisiblePoints[i] = false;
+    }
+
     // hide hidden segments
     for (const { start, end, segmentIdx } of polylineSegments) {
       if (hiddenRideSegments.has(segmentIdx)) {
@@ -188,9 +204,16 @@
       attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
     }).addTo(map);
 
-    // create lines
-    basePolyline = getBaseLine(gpsPoints, gpsGaps, hiddenRideSegments).addTo(map);
-    travelledPolyline = getTravelledLine(gpsPoints, gpsGaps, selectedRowIndex, hiddenRideSegments).addTo(map);
+    // create lines (respect trim range)
+    basePolyline = getBaseLine(gpsPoints, gpsGaps, hiddenRideSegments, trimStart, trimEnd).addTo(map);
+    travelledPolyline = getTravelledLine(
+      gpsPoints,
+      gpsGaps,
+      selectedRowIndex,
+      hiddenRideSegments,
+      trimStart,
+      trimEnd,
+    ).addTo(map);
 
     // fit ride in map
     const polylineBounds = basePolyline.getBounds();
diff --git a/src/components/Map.ts b/src/components/Map.ts
index b42d23f..0855d63 100644
--- a/src/components/Map.ts
+++ b/src/components/Map.ts
@@ -21,6 +21,8 @@ export interface Props {
   gpsPoints: LatLngExpression[];
   gpsGaps: GpsGap[];
   pointsOfInterest: PointOfInterest[];
+  trimStart: number;
+  trimEnd: number;
 }
 
 export { riderSvg };
@@ -141,16 +143,32 @@ export interface PolylineSegment {
   segmentIdx: number;
 }
 
-export function computeSegmentedLines(gpsGaps: GpsGap[], maxLength: number, hiddenSegmentIndices: Set<number>) {
+export function computeSegmentedLines(
+  gpsGaps: GpsGap[],
+  maxLength: number,
+  hiddenSegmentIndices: Set<number>,
+  trimStart = 0,
+  trimEnd = maxLength - 1,
+) {
   const result: PolylineSegment[] = [];
+  const trimEndExclusive = trimEnd + 1;
   for (let segmentIdx = 0, i = 0; i < gpsGaps.length; ++i) {
     const { secondsElapsed, index: start } = gpsGaps[i]!;
     if (secondsElapsed > CHARGE_THRESHOLD_SECONDS) segmentIdx++;
 
+    const segStart = start;
+    const segEnd = gpsGaps[i + 1]?.index ?? maxLength;
+
+    // clip to trim range
+    const clippedStart = Math.max(segStart, trimStart);
+    const clippedEnd = Math.min(segEnd, trimEndExclusive);
+
+    if (clippedStart >= clippedEnd) continue;
+
     if (!hiddenSegmentIndices.has(segmentIdx)) {
       result.push({
-        start,
-        end: gpsGaps[i + 1]?.index ?? maxLength,
+        start: clippedStart,
+        end: clippedEnd,
         segmentIdx,
       });
     }
@@ -163,9 +181,17 @@ export function getBaseLine(
   gpsPoints: LatLngExpression[],
   gpsGaps: GpsGap[],
   hiddenSegmentIndices: Set<number>,
+  trimStart = 0,
+  trimEnd = gpsPoints.length - 1,
 ): SegmentedPolyline {
   const values: { points: LatLngExpression[]; options: PolylineOptions }[] = [];
-  for (const { start, end, segmentIdx } of computeSegmentedLines(gpsGaps, gpsPoints.length, hiddenSegmentIndices)) {
+  for (const { start, end, segmentIdx } of computeSegmentedLines(
+    gpsGaps,
+    gpsPoints.length,
+    hiddenSegmentIndices,
+    trimStart,
+    trimEnd,
+  )) {
     values.push({
       points: gpsPoints.slice(start, end),
       options: MapLineOptions[MapLine.Base](segmentIdx),
@@ -180,15 +206,27 @@ export function getTravelledLine(
   gpsGaps: GpsGap[],
   limit: number,
   hiddenSegmentIndices: Set<number>,
+  trimStart = 0,
+  trimEnd = gpsPoints.length - 1,
 ): SegmentedPolyline {
   const values: { points: LatLngExpression[]; options: PolylineOptions }[] = [];
-  for (const { start, end, segmentIdx } of computeSegmentedLines(gpsGaps, gpsPoints.length, hiddenSegmentIndices)) {
-    values.push({
-      points: gpsPoints.slice(start, Math.min(limit, end)),
-      options: MapLineOptions[MapLine.Travelled](segmentIdx),
-    });
+  for (const { start, end, segmentIdx } of computeSegmentedLines(
+    gpsGaps,
+    gpsPoints.length,
+    hiddenSegmentIndices,
+    trimStart,
+    trimEnd,
+  )) {
+    // ensure we don't include points past the selected index
+    const sliceEnd = Math.min(limit, end);
+    if (start < sliceEnd) {
+      values.push({
+        points: gpsPoints.slice(start, sliceEnd),
+        options: MapLineOptions[MapLine.Travelled](segmentIdx),
+      });
+    }
 
-    if (limit === end) {
+    if (limit <= end) {
       break;
     }
   }
diff --git a/src/components/TrimSlider.svelte b/src/components/TrimSlider.svelte
new file mode 100644
index 0000000..fbbdcf5
--- /dev/null
+++ b/src/components/TrimSlider.svelte
@@ -0,0 +1,219 @@
+<script lang="ts">
+  import Button from './Button.svelte';
+  import { formatTime } from '../lib/misc';
+  import { globalState } from '../lib/global.svelte';
+  import { Units, type RowWithIndex } from '../lib/parse/types';
+
+  let {
+    open = $bindable(false),
+    trimStart = $bindable(),
+    trimEnd = $bindable(),
+    rowsLength,
+    rows,
+    units,
+  }: {
+    open: boolean;
+    trimStart: number;
+    trimEnd: number;
+    rowsLength: number;
+    rows: RowWithIndex[];
+    units: Units;
+  } = $props();
+
+  let container = $state<HTMLDivElement | null>(null);
+  let dragging = $state<'start' | 'end' | null>(null);
+
+  let startIndex = $derived(Math.min(trimStart, trimEnd));
+  let endIndex = $derived(Math.max(trimStart, trimEnd));
+  let startRow = $derived(rows[clampIndex(startIndex)]);
+  let endRow = $derived(rows[clampIndex(endIndex)]);
+  let distanceLabel = $derived(units === Units.Metric ? 'km' : 'mi');
+  let formatDistance = (distance: number) => {
+    const formatted = globalState.mapSpeed(distance);
+    return Number.isNaN(formatted) ? '??' : formatted.toFixed(1);
+  };
+
+  function clampIndex(i: number) {
+    return Math.max(0, Math.min(rowsLength - 1, i));
+  }
+
+  function reset() {
+    trimStart = 0;
+    trimEnd = rowsLength ? rowsLength - 1 : 0;
+  }
+
+  function close() {
+    open = false;
+  }
+
+  function posToIndex(clientX: number) {
+    if (!container) return 0;
+    const rect = container.getBoundingClientRect();
+    const x = Math.max(0, Math.min(rect.width, clientX - rect.left));
+    const t = rect.width <= 0 ? 0 : x / rect.width;
+    return clampIndex(Math.round(t * (rowsLength - 1)));
+  }
+
+  function selectNearestHandle(index: number) {
+    const startDist = Math.abs(index - trimStart);
+    const endDist = Math.abs(index - trimEnd);
+    return startDist <= endDist ? 'start' : 'end';
+  }
+
+  function onSliderPointerDown(e: PointerEvent) {
+    const idx = posToIndex(e.clientX);
+    const nearestHandle = selectNearestHandle(idx);
+    if (nearestHandle === 'start') {
+      trimStart = idx;
+    } else {
+      trimEnd = idx;
+    }
+    dragging = nearestHandle;
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  }
+
+  function onPointerDownStart(e: PointerEvent) {
+    e.stopPropagation();
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    dragging = 'start';
+    trimStart = posToIndex(e.clientX);
+  }
+
+  function onPointerDownEnd(e: PointerEvent) {
+    e.stopPropagation();
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    dragging = 'end';
+    trimEnd = posToIndex(e.clientX);
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (!dragging) return;
+    const idx = posToIndex(e.clientX);
+    if (dragging === 'start') {
+      trimStart = idx;
+    } else {
+      trimEnd = idx;
+    }
+  }
+
+  function onPointerUp() {
+    dragging = null;
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape' || e.key === 'Enter') {
+      e.preventDefault();
+      close();
+    }
+  }
+
+  $effect(() => {
+    if (!open) return;
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  });
+</script>
+
+{#if open}
+  <div
+    class="fixed inset-0 z-[11000] flex items-center justify-center"
+    onpointermove={onPointerMove}
+    onpointerup={onPointerUp}
+    onpointercancel={onPointerUp}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="trim-slider-title"
+    tabindex="-1"
+  >
+    <div class="absolute inset-0 bg-black/40" onclick={close} role="presentation" aria-hidden="true"></div>
+    <div
+      bind:this={container}
+      class="relative w-[min(95%,800px)] p-4 bg-slate-900 border rounded-lg z-10 flex flex-col gap-4"
+    >
+      <div class="flex items-center justify-between mb-2">
+        <div id="trim-slider-title" class="font-bold">Trim ride</div>
+        <div class="flex items-center gap-2">
+          <Button onclick={reset}>reset</Button>
+          <Button onclick={close}>done</Button>
+        </div>
+      </div>
+
+      <div class="grid gap-2 text-xs text-slate-300 grid-cols-[repeat(2,minmax(0,1fr))]">
+        <div class="rounded border border-slate-700 p-2 bg-slate-950">
+          <div class="font-mono text-[11px] uppercase tracking-widest text-slate-500">Start</div>
+          <div class="mt-1 font-semibold">Log index: {startIndex + 1}</div>
+          <div>Time: {formatTime(startRow?.time ?? 0)}</div>
+          <div>Distance: {formatDistance(startRow?.distance ?? 0)} {distanceLabel}</div>
+        </div>
+        <div class="rounded border border-slate-700 p-2 bg-slate-950">
+          <div class="font-mono text-[11px] uppercase tracking-widest text-slate-500">End</div>
+          <div class="mt-1 font-semibold">Log index: {endIndex + 1}</div>
+          <div>Time: {formatTime(endRow?.time ?? 0)}</div>
+          <div>Distance: {formatDistance(endRow?.distance ?? 0)} {distanceLabel}</div>
+        </div>
+      </div>
+
+      <div class="select-none">
+        <div
+          class="relative h-8 bg-slate-700 rounded-lg overflow-hidden"
+          role="presentation"
+          onpointerdown={onSliderPointerDown}
+        >
+          <!-- left filler -->
+          <div
+            class="absolute left-0 top-0 bottom-0 bg-slate-600"
+            style="width: {(Math.min(trimStart, trimEnd) / Math.max(1, rowsLength - 1)) * 100}%"
+          ></div>
+          <!-- middle selected -->
+          <div
+            class="absolute top-0 bottom-0 bg-cyan-600"
+            style="left: {(Math.min(trimStart, trimEnd) / Math.max(1, rowsLength - 1)) * 100}%; width: {((Math.max(
+              trimStart,
+              trimEnd,
+            ) -
+              Math.min(trimStart, trimEnd)) /
+              Math.max(1, rowsLength - 1)) *
+              100}%"
+          ></div>
+          <!-- right filler -->
+          <div
+            class="absolute right-0 top-0 bottom-0 bg-slate-600"
+            style="width: {(1 - Math.max(trimStart, trimEnd) / Math.max(1, rowsLength - 1)) * 100}%"
+          ></div>
+
+          <!-- start handle -->
+          <div
+            role="slider"
+            aria-label="Trim start"
+            aria-valuemin="0"
+            aria-valuemax={rowsLength - 1}
+            aria-valuenow={startIndex}
+            class="absolute top-0 bottom-0 w-4 -translate-x-1/2 bg-white/90 rounded-full shadow-lg cursor-grab"
+            style="left: {(trimStart / Math.max(1, rowsLength - 1)) * 100}%"
+            onpointerdown={onPointerDownStart}
+            tabindex="0"
+          ></div>
+
+          <!-- end handle -->
+          <div
+            role="slider"
+            aria-label="Trim end"
+            aria-valuemin="0"
+            aria-valuemax={rowsLength - 1}
+            aria-valuenow={endIndex}
+            class="absolute top-0 bottom-0 w-4 -translate-x-1/2 bg-white/90 rounded-full shadow-lg cursor-grab"
+            style="left: {(trimEnd / Math.max(1, rowsLength - 1)) * 100}%"
+            onpointerdown={onPointerDownEnd}
+            tabindex="0"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .cursor-grab:active {
+    cursor: grabbing;
+  }
+</style>
diff --git a/src/components/View.svelte b/src/components/View.svelte
index abafdcb..1ba2e2a 100644
--- a/src/components/View.svelte
+++ b/src/components/View.svelte
@@ -3,6 +3,7 @@
   import Map from './Map.svelte';
   import Details from './Details.svelte';
   import Header from './Header.svelte';
+  import TrimSlider from './TrimSlider.svelte';
   import { demoFile, demoRows } from '../lib/parse/float-control';
   import type { DragEventHandler, EventHandler } from 'svelte/elements';
   import { DataSource, type RowWithIndex } from '../lib/parse/types';
@@ -63,10 +64,23 @@
         },
   );
 
+  /** whether trim slider overlay is open */
+  let sliderOpen = $state(false);
   let banners = $state<Banner[]>([]);
 
-  /** array-as-map of whether particular rows are visible or not */
-  let visible = $state<boolean[]>([]);
+  /** array-as-map of whether particular rows are visible from map/bounds */
+  let visibleFromMap = $state<boolean[]>([]);
+  /** trimming range start index */
+  let trimStart = $state(0);
+  /** trimming range end index */
+  let trimEnd = $derived(rows.length ? rows.length - 1 : 0);
+
+  /** derived visible array after applying trim range to map-driven visibility */
+  let visible = $derived.by(() => {
+    const s = Math.min(trimStart, trimEnd);
+    const e = Math.max(trimStart, trimEnd);
+    return visibleFromMap.map((v, i) => (v && i >= s && i <= e) ?? false);
+  });
   /** filtered visible rows */
   let visibleRows = $derived(rows.filter((_, i) => visible[i]));
   /** whether this ride appears to include footpad ADC telemetry */
@@ -92,7 +106,7 @@
   let swapMapAndDetails = $state(false);
 
   const setVisible = (arrayAsMap: boolean[]) => {
-    visible = arrayAsMap;
+    visibleFromMap = arrayAsMap;
     if (!visible[selectedRowIndex]) {
       // it's not the best, but try to find a point on the line that's somewhat in the middle
       // this doesn't really work well if there are multiple lines going in different directions
@@ -140,6 +154,10 @@
           }
 
           rows = results.data;
+          // initialize visibility and trimming to full range for the newly loaded ride
+          visibleFromMap = new Array(rows.length).fill(true);
+          trimStart = 0;
+          trimEnd = rows.length ? rows.length - 1 : 0;
           selectedIndex = 0;
 
           stats = computeStats(rows, pointsOfInterest);
@@ -236,7 +254,7 @@
   </div>
 {/snippet}
 
-<Header bind:file />
+<Header bind:file bind:trimSliderOpen={sliderOpen} />
 
 <main
   class="grid w-full bg-slate-600 gap-px grid-flow-dense
@@ -295,6 +313,8 @@
       {gpsPoints}
       {gpsGaps}
       {pointsOfInterest}
+      {trimStart}
+      {trimEnd}
     />
   </div>
   <div
@@ -368,8 +388,13 @@
       →
     </Button>
   </div>
+  <div class="pointer-events-auto">
+    <Button class="text-xl" onpointerdown={() => (sliderOpen = !sliderOpen)}>✂</Button>
+  </div>
 </div>
 
+<TrimSlider bind:open={sliderOpen} bind:trimStart bind:trimEnd rowsLength={rows.length} {rows} units={settings.units} />
+
 <style>
   /* NOTE: must match up with `wide` breakpoint */
   @media (width < 640px) {