diff --git a/packages/element/src/itk-view-2d-controls-shoelace.ts b/packages/element/src/itk-view-2d-controls-shoelace.ts
index ea498231..aeeb8fa2 100644
--- a/packages/element/src/itk-view-2d-controls-shoelace.ts
+++ b/packages/element/src/itk-view-2d-controls-shoelace.ts
@@ -41,7 +41,7 @@ export class View2dControlsShoelace extends LitElement {
               <label>
                 <sl-range
                   value=${Number(slice)}
-                  @sl-change="${this.controls.onSlice}"
+                  @sl-input="${this.controls.onSlice}"
                   min="0"
                   max="1"
                   step=".01"
diff --git a/packages/element/src/view-2d-controls-controller.ts b/packages/element/src/view-2d-controls-controller.ts
index 57cb336a..4df10b01 100644
--- a/packages/element/src/view-2d-controls-controller.ts
+++ b/packages/element/src/view-2d-controls-controller.ts
@@ -1,6 +1,7 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
 import { SelectorController } from 'xstate-lit';
-import { AxisType, View2dActor } from '@itk-viewer/viewer/view-2d.js';
+import { View2dActor } from '@itk-viewer/viewer/view-2d.js';
+import { AxisType } from '@itk-viewer/viewer/slice-utils.js';
 import { TransferFunctionEditor } from '@itk-viewer/transfer-function-editor/TransferFunctionEditor.js';
 import { ColorTransferFunction } from '@itk-viewer/transfer-function-editor/ColorTransferFunction.js';
 import { Image, ImageSnapshot } from '@itk-viewer/viewer/image.js';
diff --git a/packages/viewer/src/image-builder.ts b/packages/viewer/src/image-builder.ts
new file mode 100644
index 00000000..08d90620
--- /dev/null
+++ b/packages/viewer/src/image-builder.ts
@@ -0,0 +1,197 @@
+import {
+  ActorRefFrom,
+  AnyActorRef,
+  assign,
+  fromPromise,
+  sendParent,
+  setup,
+} from 'xstate';
+import { mat4, vec3 } from 'gl-matrix';
+import { Bounds } from '@itk-viewer/utils/bounding-box.js';
+import {
+  BuiltImage,
+  MultiscaleSpatialImage,
+} from '@itk-viewer/io/MultiscaleSpatialImage.js';
+import { AxisType, Axis } from './slice-utils.js';
+import { Image } from './image.js';
+
+const axisToIndex = {
+  I: 0,
+  J: 1,
+  K: 2,
+} as const;
+
+// To MultiScaleImage dimension
+const axisToDim = {
+  I: 'x',
+  J: 'y',
+  K: 'z',
+} as const;
+
+export const imageBuilder = setup({
+  types: {} as {
+    input: {
+      image: MultiscaleSpatialImage;
+      imageActor: Image;
+      scale: number;
+      slice: number;
+      axis: AxisType;
+    };
+    context: {
+      slice: number;
+      axis: AxisType;
+      scale: number;
+      image: MultiscaleSpatialImage;
+      imageActor?: Image;
+      builtImage?: BuiltImage;
+      worker?: AnyActorRef;
+    };
+  },
+  // actions: {},
+  actors: {
+    findSliceIndex: fromPromise(
+      async ({
+        input: { image, builtImage, scale, slice, axis },
+      }: {
+        input: {
+          image: MultiscaleSpatialImage;
+          builtImage: BuiltImage;
+          scale: number;
+          slice: number; // 0 to 1 for depth on slice axis
+          axis: AxisType;
+        };
+      }) => {
+        // buildImage could be larger than slice if cached so
+        // find index of slice in builtImage
+        const indexToWorld = await image.scaleIndexToWorld(scale);
+        const worldToIndex = mat4.invert(mat4.create(), indexToWorld);
+        const wholeImageOrigin = [...(await image.scaleOrigin(scale))] as vec3;
+        if (wholeImageOrigin.length == 2) {
+          wholeImageOrigin[2] = 0;
+        }
+        vec3.transformMat4(wholeImageOrigin, wholeImageOrigin, worldToIndex);
+        const buildImageOrigin = [...builtImage.origin] as vec3;
+        if (buildImageOrigin.length == 2) {
+          buildImageOrigin[2] = 0;
+        }
+        vec3.transformMat4(buildImageOrigin, buildImageOrigin, worldToIndex);
+
+        // vector from whole image origin to build image origin
+        const wholeImageToBuildImageOrigin = vec3.subtract(
+          buildImageOrigin,
+          buildImageOrigin,
+          wholeImageOrigin,
+        );
+        const builtOriginIndex =
+          wholeImageToBuildImageOrigin[axisToIndex[axis]];
+
+        const axisIndexSize =
+          image.scaleInfos[scale].arrayShape.get(axisToDim[axis]) ?? 1;
+        const fullImageSliceIndex = slice * axisIndexSize;
+
+        const sliceIndexInBuildImageFloat =
+          fullImageSliceIndex - builtOriginIndex;
+        const sliceIndexFloat = Math.round(sliceIndexInBuildImageFloat);
+        // Math.round goes up with .5, so clamp to max index
+        const sliceIndex = Math.max(
+          0,
+          Math.min(sliceIndexFloat, builtImage.size[axisToIndex[axis]] - 1),
+        );
+        return { builtImage, sliceIndex };
+      },
+    ),
+  },
+}).createMachine({
+  id: 'imageBuilder',
+  context: ({ input }) => {
+    return input;
+  },
+  on: {
+    cancel: {
+      target: '.done',
+    },
+  },
+  initial: 'gettingWorker',
+  states: {
+    gettingWorker: {
+      entry: [
+        ({
+          event: {
+            input: { imageActor },
+          },
+          self,
+        }) => {
+          imageActor.send({ type: 'getWorker', actor: self });
+        },
+      ],
+      on: {
+        worker: {
+          actions: assign({
+            worker: ({ event }) => event.worker,
+          }),
+          target: 'building',
+        },
+      },
+    },
+    building: {
+      entry: [
+        ({ context: { scale, slice, axis, worker } }) => {
+          const normalizedImageBounds = [0, 1, 0, 1, 0, 1] as Bounds;
+          if (axis === Axis.I) {
+            normalizedImageBounds[0] = slice;
+            normalizedImageBounds[1] = slice;
+          } else if (axis === Axis.J) {
+            normalizedImageBounds[2] = slice;
+            normalizedImageBounds[3] = slice;
+          } else if (axis === Axis.K) {
+            normalizedImageBounds[4] = slice;
+            normalizedImageBounds[5] = slice;
+          }
+          worker!.send({
+            type: 'getImageInImageSpace',
+            scale,
+            normalizedImageBounds,
+          });
+        },
+      ],
+      on: {
+        buildImage: {
+          actions: [
+            assign({
+              builtImage: ({ event }) => event.builtImage,
+            }),
+          ],
+          target: 'findingSliceIndex',
+        },
+      },
+    },
+    findingSliceIndex: {
+      invoke: {
+        src: 'findSliceIndex',
+        input: ({ context }) => ({
+          image: context.image,
+          builtImage: context.builtImage!,
+          scale: context.scale,
+          slice: context.slice,
+          axis: context.axis,
+        }),
+        onDone: {
+          actions: [
+            sendParent(({ context, event: { output } }) => ({
+              type: 'imageBuilt',
+              builtImage: context.builtImage,
+              sliceIndex: output.sliceIndex,
+            })),
+          ],
+          target: 'done',
+        },
+      },
+    },
+    done: {
+      type: 'final',
+    },
+  },
+});
+
+export type ImageBuilder = ActorRefFrom<typeof imageBuilder>;
+export type ImageBuilderSnapshot = ReturnType<ImageBuilder['getSnapshot']>;
diff --git a/packages/viewer/src/slice-utils.ts b/packages/viewer/src/slice-utils.ts
new file mode 100644
index 00000000..bf743342
--- /dev/null
+++ b/packages/viewer/src/slice-utils.ts
@@ -0,0 +1,9 @@
+import { ValueOf } from '@itk-viewer/io/types.js';
+
+export const Axis = {
+  I: 'I',
+  J: 'J',
+  K: 'K',
+} as const;
+
+export type AxisType = ValueOf<typeof Axis>;
diff --git a/packages/viewer/src/view-2d.ts b/packages/viewer/src/view-2d.ts
index c1816d41..d4e19f78 100644
--- a/packages/viewer/src/view-2d.ts
+++ b/packages/viewer/src/view-2d.ts
@@ -12,35 +12,17 @@ import {
   BuiltImage,
   ensure3dDirection,
 } from '@itk-viewer/io/MultiscaleSpatialImage.js';
-import { ValueOf } from '@itk-viewer/io/types.js';
 import { XYZ, ensuredDims } from '@itk-viewer/io/dimensionUtils.js';
-import { Bounds, getCorners } from '@itk-viewer/utils/bounding-box.js';
+import { getCorners } from '@itk-viewer/utils/bounding-box.js';
 import { CreateChild } from './children.js';
 import { Camera, reset2d } from './camera.js';
 import { image, Image } from './image.js';
 import { ViewportActor } from './viewport.js';
-import { mat3, mat4, quat, vec3 } from 'gl-matrix';
+import { mat3, quat, vec3 } from 'gl-matrix';
+import { AxisType, Axis } from './slice-utils.js';
+import { ImageBuilder, imageBuilder } from './image-builder.js';
 
-export const Axis = {
-  I: 'I',
-  J: 'J',
-  K: 'K',
-} as const;
-
-export type AxisType = ValueOf<typeof Axis>;
-
-const axisToIndex = {
-  I: 0,
-  J: 1,
-  K: 2,
-} as const;
-
-// To MultiScaleImage dimension
-const axisToDim = {
-  I: 'x',
-  J: 'y',
-  K: 'z',
-} as const;
+const IMAGE_BUILDERS_LIMIT = 4;
 
 const toRotation = (direction: Float64Array, axis: AxisType) => {
   const direction3d = ensure3dDirection(direction);
@@ -91,6 +73,7 @@ export const view2d = setup({
       viewport?: ViewportActor;
       camera?: Camera;
       imageActor?: Image;
+      imageBuilders: Array<ImageBuilder>;
     };
     events:
       | { type: 'setImage'; image: MultiscaleSpatialImage }
@@ -100,79 +83,16 @@ export const view2d = setup({
       | { type: 'setViewport'; viewport: ViewportActor }
       | { type: 'setResolution'; resolution: [number, number] }
       | { type: 'setCamera'; camera: Camera }
+      | {
+          type: 'imageBuilt';
+          builtImage: BuiltImage;
+          sliceIndex: number;
+          actor: ImageBuilder;
+        }
       | CreateChild;
   },
   actors: {
-    imageBuilder: fromPromise(
-      async ({
-        input: { image, scale, slice, axis },
-      }: {
-        input: {
-          image: MultiscaleSpatialImage;
-          scale: number;
-          slice: number; // 0 to 1 for depth on slice axis
-          axis: AxisType;
-        };
-      }) => {
-        const normalizedImageBounds = [0, 1, 0, 1, 0, 1] as Bounds;
-        if (axis === Axis.I) {
-          normalizedImageBounds[0] = slice;
-          normalizedImageBounds[1] = slice;
-        } else if (axis === Axis.J) {
-          normalizedImageBounds[2] = slice;
-          normalizedImageBounds[3] = slice;
-        } else if (axis === Axis.K) {
-          normalizedImageBounds[4] = slice;
-          normalizedImageBounds[5] = slice;
-        }
-        const builtImage = (await image.getImageInImageSpace(
-          scale,
-          normalizedImageBounds,
-        )) as BuiltImage;
-
-        if (builtImage.imageType.dimension === 2) {
-          return { builtImage, sliceIndex: 0 };
-        }
-
-        // buildImage could be larger than slice if cached so
-        // find index of slice in builtImage
-        const indexToWorld = await image.scaleIndexToWorld(scale);
-        const worldToIndex = mat4.invert(mat4.create(), indexToWorld);
-        const wholeImageOrigin = [...(await image.scaleOrigin(scale))] as vec3;
-        if (wholeImageOrigin.length == 2) {
-          wholeImageOrigin[2] = 0;
-        }
-        vec3.transformMat4(wholeImageOrigin, wholeImageOrigin, worldToIndex);
-        const buildImageOrigin = [...builtImage.origin] as vec3;
-        if (buildImageOrigin.length == 2) {
-          buildImageOrigin[2] = 0;
-        }
-        vec3.transformMat4(buildImageOrigin, buildImageOrigin, worldToIndex);
-
-        // vector from whole image origin to build image origin
-        const wholeImageToBuildImageOrigin = vec3.subtract(
-          buildImageOrigin,
-          buildImageOrigin,
-          wholeImageOrigin,
-        );
-        const builtOriginIndex =
-          wholeImageToBuildImageOrigin[axisToIndex[axis]];
-
-        const axisIndexSize =
-          image.scaleInfos[scale].arrayShape.get(axisToDim[axis]) ?? 1;
-        const fullImageSliceIndex = slice * axisIndexSize;
-
-        const sliceIndexInBuildImageFloat =
-          fullImageSliceIndex - builtOriginIndex;
-        const sliceIndexFloat = Math.round(sliceIndexInBuildImageFloat);
-        // Math.round goes up with .5, so clamp to max index
-        const sliceIndex = Math.max(
-          0,
-          Math.min(sliceIndexFloat, builtImage.size[axisToIndex[axis]] - 1),
-        );
-        return { builtImage, sliceIndex };
-      },
-    ),
+    imageBuilder,
     findDefaultAxis: fromPromise(
       async ({
         input: { image, scale },
@@ -241,15 +161,16 @@ export const view2d = setup({
     },
   },
 }).createMachine({
+  id: 'view2d',
   context: () => {
     return {
       slice: 0.5,
       axis: Axis.K,
       scale: 0,
       spawned: {},
+      imageBuilders: [],
     };
   },
-  id: 'view2d',
   initial: 'view2d',
   states: {
     view2d: {
@@ -420,39 +341,72 @@ export const view2d = setup({
           },
         },
         buildingImage: {
-          invoke: {
-            input: ({ context }) => {
-              const { image, scale, slice, axis } = context;
-              if (!image) throw new Error('No image available');
-              return {
-                image,
-                scale,
-                slice,
-                axis,
-              };
-            },
-            src: 'imageBuilder',
-            onDone: {
+          entry: [
+            assign({
+              imageBuilders: ({
+                context: {
+                  imageBuilders,
+                  scale,
+                  slice,
+                  axis,
+                  image,
+                  imageActor,
+                },
+                spawn,
+              }) => {
+                if (!image || !imageActor)
+                  throw new Error('No image available');
+                const actor = spawn('imageBuilder', {
+                  input: { scale, slice, axis, image, imageActor },
+                });
+
+                const cancelCount = imageBuilders.length - IMAGE_BUILDERS_LIMIT;
+                if (cancelCount > 0) {
+                  const staleActors = imageBuilders.splice(0, cancelCount);
+                  staleActors.forEach((actor) => {
+                    actor.send({ type: 'cancel' });
+                  });
+                }
+                return [...imageBuilders, actor];
+              },
+            }),
+          ],
+          on: {
+            imageBuilt: {
               actions: [
-                enqueueActions(({ context, enqueue, event: { output } }) => {
-                  Object.values(context.spawned).forEach((actor) => {
-                    enqueue.sendTo(actor, {
-                      type: 'imageBuilt',
-                      image: output.builtImage,
-                      sliceIndex: output.sliceIndex,
+                enqueueActions(
+                  ({
+                    context: { imageBuilders, spawned, imageActor },
+                    enqueue,
+                    event: { builtImage, sliceIndex, actor },
+                  }) => {
+                    const actorIndex = imageBuilders.indexOf(actor);
+                    const isStale = actorIndex === -1;
+                    if (isStale) return;
+
+                    Object.values(spawned).forEach((actor) => {
+                      enqueue.sendTo(actor, {
+                        type: 'imageBuilt',
+                        image: builtImage,
+                        sliceIndex: sliceIndex,
+                      });
                     });
-                  });
-                }),
-                ({ context, event: { output } }) => {
-                  context.imageActor!.send({
-                    type: 'builtImage',
-                    builtImage: output.builtImage,
-                  });
-                },
+                    enqueue.sendTo(imageActor!, {
+                      type: 'builtImage',
+                      builtImage: builtImage,
+                    });
+
+                    const staleActors = imageBuilders.splice(0, actorIndex + 1);
+                    staleActors.forEach((actor) => {
+                      enqueue.sendTo(actor, { type: 'cancel' });
+                    });
+                    enqueue.assign({
+                      imageBuilders: [...imageBuilders],
+                    });
+                  },
+                ),
               ],
             },
-          },
-          on: {
             setScale: {
               actions: [
                 assign({
diff --git a/packages/vtkjs/src/view-2d-vtkjs.machine.ts b/packages/vtkjs/src/view-2d-vtkjs.machine.ts
index 1c7cb23d..20b43be7 100644
--- a/packages/vtkjs/src/view-2d-vtkjs.machine.ts
+++ b/packages/vtkjs/src/view-2d-vtkjs.machine.ts
@@ -4,7 +4,7 @@ import GenericRenderWindow, {
 } from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow.js';
 import { BuiltImage } from '@itk-viewer/io/MultiscaleSpatialImage.js';
 import { Camera, Pose } from '@itk-viewer/viewer/camera.js';
-import { Axis, AxisType } from '@itk-viewer/viewer/view-2d.js';
+import { Axis, AxisType } from '@itk-viewer/viewer/slice-utils.js';
 import { Image, ImageSnapshot } from '@itk-viewer/viewer/image.js';
 
 export type Context = {
diff --git a/packages/vtkjs/src/view-2d-vtkjs.ts b/packages/vtkjs/src/view-2d-vtkjs.ts
index 8d002db9..a869a632 100644
--- a/packages/vtkjs/src/view-2d-vtkjs.ts
+++ b/packages/vtkjs/src/view-2d-vtkjs.ts
@@ -16,7 +16,7 @@ import {
   SetContainerEvent,
   view2dLogic,
 } from './view-2d-vtkjs.machine.js';
-import { AxisType } from '@itk-viewer/viewer/view-2d.js';
+import { AxisType } from '@itk-viewer/viewer/slice-utils.js';
 import { ImageSnapshot } from '@itk-viewer/viewer/image.js';
 
 const axisToSliceMode = {
diff --git a/tsconfig.root.json b/tsconfig.root.json
index 9573dd8c..98a4ab1b 100644
--- a/tsconfig.root.json
+++ b/tsconfig.root.json
@@ -4,6 +4,7 @@
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "target": "ES2022",
     "declaration": true,
+    "declarationMap": true,
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,