diff --git a/src/components/Cards/AppCard.tsx b/src/components/Cards/AppCard.tsx
index 4baeac6..76e83f1 100644
--- a/src/components/Cards/AppCard.tsx
+++ b/src/components/Cards/AppCard.tsx
@@ -80,12 +80,16 @@ export default function AppCard() {
   const symbolsCheck = useRef<HTMLInputElement | null>(null);
 
   const [password, setPassword] = useState<string>("");
-  const [rangeValue, setRangeValue] = useState<string | undefined>("0");
+  const [rangeValue, setRangeValue] = useState<number>(0);
   const [checkedStateCount, setCheckedStateCount] = useState<number>(0);
 
   // Function to update the range value
   const updateRangeValue = () => {
-    setRangeValue(range.current?.value);
+    let value: number = 0;
+    if (range.current?.value) {
+    value = parseInt(range.current?.value);
+    }
+    setRangeValue(value);
   };
 
   // Function to determine strength state and type of values to include in password
@@ -111,7 +115,7 @@ export default function AppCard() {
   // Generate password per conditions specified
   const generatePassword = () => {
     if (rangeValue !== undefined) {
-      const passLength: number = parseInt(rangeValue);
+      const passLength: number = rangeValue;
       const newArray = [];
 
       // Append items to array
diff --git a/src/components/Sections/PasswordLength.tsx b/src/components/Sections/PasswordLength.tsx
index 0bb713e..2babb47 100644
--- a/src/components/Sections/PasswordLength.tsx
+++ b/src/components/Sections/PasswordLength.tsx
@@ -12,7 +12,7 @@ export default function PasswordLength({
   updateFunction,
 }: {
   range: MutableRefObject<HTMLInputElement | null>;
-  rangeValue: string | undefined;
+  rangeValue: number;
   updateFunction: VoidFunction;
 }) {
   return (