diff --git a/app/components/Viewer/Options/TimeStepSlider.vue b/app/components/Viewer/Options/TimeStepSlider.vue
index f04b912f..0778036f 100644
--- a/app/components/Viewer/Options/TimeStepSlider.vue
+++ b/app/components/Viewer/Options/TimeStepSlider.vue
@@ -23,56 +23,50 @@ function commitTimeStep(value: number): void {
 
 function formatTime(index: number): string {
   const time = timeSteps[index];
-  return time === undefined ? "" : `t = ${time}`;
+  return time === undefined ? "" : `timestep = ${time}`;
 }
 </script>
 
 <template>
-  <v-slider
-    v-if="timeSteps.length > 1"
-    data-testid="timeStepSlider"
-    v-model="sliderTimeStep"
-    :min="0"
-    :max="timeSteps.length - 1"
-    :step="1"
-    color="primary"
-    density="compact"
-    class="time-step-slider mt-3"
-    hide-details
-    show-ticks="always"
-    :tick-size="10"
-    thumb-label="hover"
-    @end="commitTimeStep"
-    @keyup="commitTimeStep(sliderTimeStep)"
-  >
-    <template #prepend>
-      <span data-testid="timeStepValue" class="time-step-value">
-        {{ formatTime(sliderTimeStep) }}
-      </span>
-    </template>
-    <template #thumb-label="{ modelValue }">{{ formatTime(modelValue) }}</template>
-    <template #tick-label="{ index }">
-      <span class="time-step-tick">
-        <span class="v-slider-thumb__label time-step-tick-label">
-          <span class="v-slider-thumb__label-wedge" />
-          {{ formatTime(index) }}
+  <div v-if="timeSteps.length > 1" class="mt-3">
+    <div data-testid="timeStepValue" class="time-step-value">
+      {{ formatTime(sliderTimeStep) }}
+    </div>
+    <v-slider
+      data-testid="timeStepSlider"
+      v-model="sliderTimeStep"
+      :min="0"
+      :max="timeSteps.length - 1"
+      :step="1"
+      color="primary"
+      density="compact"
+      class="time-step-slider"
+      hide-details
+      show-ticks="always"
+      :tick-size="10"
+      thumb-label="hover"
+      @end="commitTimeStep"
+      @keyup="commitTimeStep(sliderTimeStep)"
+    >
+      <template #thumb-label="{ modelValue }">{{ formatTime(modelValue) }}</template>
+      <template #tick-label="{ index }">
+        <span class="time-step-tick">
+          <span class="v-slider-thumb__label time-step-tick-label">
+            <span class="v-slider-thumb__label-wedge" />
+            {{ formatTime(index) }}
+          </span>
         </span>
-      </span>
-    </template>
-  </v-slider>
+      </template>
+    </v-slider>
+  </div>
 </template>
 
 <style scoped>
 .time-step-value {
-  min-width: 32px;
   white-space: nowrap;
   font-size: 0.8125rem;
 }
 
-.time-step-slider.v-slider.v-input--horizontal :deep(.v-input__prepend) {
-  margin-inline-end: 4px;
-}
-
 .time-step-slider :deep(.v-slider-thumb__label) {
   width: auto;
   white-space: nowrap;
diff --git a/tests/unit/components/AttributeSelector.nuxt.test.ts b/tests/unit/components/AttributeSelector.nuxt.test.ts
index 2ab751ed..5c7b0af8 100644
--- a/tests/unit/components/AttributeSelector.nuxt.test.ts
+++ b/tests/unit/components/AttributeSelector.nuxt.test.ts
@@ -84,7 +84,7 @@ describe("attributeSelector time steps", () => {
     const wrapper = await mountSelector("temperature", 1);
 
     expect(wrapper.find('[data-testid="timeStepSlider"]').exists()).toBe(true);
-    expect(wrapper.find('[data-testid="timeStepValue"]').text()).toBe("t = 1");
+    expect(wrapper.find('[data-testid="timeStepValue"]').text()).toBe("timestep = 1");
   });
 
   test("hides the slider for a non temporal attribute", async () => {