diff --git a/frontend/src/components/Question/_RangeTitle.jsx b/frontend/src/components/Question/_RangeTitle.jsx
deleted file mode 100644
index 048a170cb..000000000
--- a/frontend/src/components/Question/_RangeTitle.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-
-import { renderLabel } from "../../util/label";
-
-const RangeTitle = ({question, value, sliderValue, emptyValue, changePosition=false}) => {
-    const nChoices = Object.keys(question.choices).length - 1;
-    const position = - (nChoices - sliderValue * 2) / nChoices  * 44;
-    return (
-        <div>
-            <h4 className="current-value" style={{position: 'relative', left: changePosition? `${position}%` : '0%'}}>
-            { emptyValue ? (
-                renderLabel("fa-arrows-left-right", "fa-2x")
-            ) : (
-                <span className={`is-${value}`}> {renderLabel(question.choices[value], "fa-2x")}</span>
-            )
-            }
-            </h4>
-        </div> 
-    )
-}
-
-export default RangeTitle;
-    
\ No newline at end of file
diff --git a/frontend/src/components/Question/_RangeTitle.tsx b/frontend/src/components/Question/_RangeTitle.tsx
new file mode 100644
index 000000000..bc6869597
--- /dev/null
+++ b/frontend/src/components/Question/_RangeTitle.tsx
@@ -0,0 +1,34 @@
+import { renderLabel } from "../../util/label";
+import Question from "@/types/Question";
+
+interface RangeTitleProps {
+    question: Question;
+    value: string;
+    sliderValue: number;
+    emptyValue: boolean;
+    changePosition?: boolean;
+}
+
+const RangeTitle = ({ question, value, sliderValue, emptyValue, changePosition = false }: RangeTitleProps) => {
+
+    if (!question.choices || Object.keys(question.choices).length === 0) {
+        throw new Error("RangeTitle question must have choices");
+    }
+
+    const nChoices = Object.keys(question.choices).length - 1;
+    const position = - (nChoices - sliderValue * 2) / nChoices * 44;
+    return (
+        <div>
+            <h4 className="current-value" style={{ position: 'relative', left: changePosition ? `${position}%` : '0%' }}>
+                {emptyValue ? (
+                    renderLabel("fa-arrows-left-right", "fa-2x")
+                ) : (
+                    <span className={`is-${value}`}> {renderLabel(question.choices[value], "fa-2x")}</span>
+                )
+                }
+            </h4>
+        </div>
+    )
+}
+
+export default RangeTitle;
diff --git a/frontend/src/util/label.jsx b/frontend/src/util/label.tsx
similarity index 69%
rename from frontend/src/util/label.jsx
rename to frontend/src/util/label.tsx
index 86ea9cf3b..2ff57eba4 100644
--- a/frontend/src/util/label.jsx
+++ b/frontend/src/util/label.tsx
@@ -1,4 +1,4 @@
-export const renderLabel = (label, size="fa-lg") => {
+export const renderLabel = (label: string, size = "fa-lg") => {
     if (!label) return label
     if (label.startsWith('fa-')) return <span className={`fa-solid ${label} ${size}`}></span>
     else return label