diff --git a/package-lock.json b/package-lock.json
index 6cf2d2f..80cee3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-select": "^2.1.1",
+        "@radix-ui/react-slider": "^1.2.1",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-switch": "^1.1.0",
         "@tauri-apps/api": "^1",
@@ -1531,6 +1532,54 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.1.tgz",
+      "integrity": "sha512-bEzQoDW0XP+h/oGbutF5VMWJPAl/UU8IJjr7h02SOHDIIIxq+cep8nItVNoBV+OMmahCdqdF38FTpmXoqQUGvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
diff --git a/package.json b/package.json
index 7ab9ed9..28ee6b5 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@tauri-apps/api": "^1",
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
new file mode 100644
index 0000000..774be74
--- /dev/null
+++ b/src/components/ui/slider.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-neutral-100 dark:bg-neutral-800">
+      <SliderPrimitive.Range className="absolute h-full bg-neutral-900 dark:bg-neutral-50" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-neutral-900 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/src/consts/chart.ts b/src/consts/chart.ts
index 0a6d81e..5ff43e3 100644
--- a/src/consts/chart.ts
+++ b/src/consts/chart.ts
@@ -19,4 +19,4 @@ export const displayDataType: Record<HardwareDataType, string> = {
   clock: "Clock",
 } as const;
 
-export const sizes = ["sm", "md", "lg", "xl", "2xl"] as const;
+export const sizeOptions = ["sm", "md", "lg", "xl", "2xl"] as const;
diff --git a/src/template/Settings.tsx b/src/template/Settings.tsx
index 94f9712..3bc424a 100644
--- a/src/template/Settings.tsx
+++ b/src/template/Settings.tsx
@@ -7,7 +7,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { sizes } from "@/consts/chart";
+import { Slider } from "@/components/ui/slider";
+import { sizeOptions } from "@/consts/chart";
 import type { ChartDataType } from "@/types/hardwareDataType";
 import type { Settings as SettingTypes } from "@/types/settingsType";
 
@@ -81,26 +82,30 @@ const SettingColorMode = () => {
 
 const SettingLineChartSize = () => {
   const { settings, updateSettingAtom } = useSettingsAtom();
+  const sizeIndex = sizeOptions.indexOf(
+    settings.graphSize as SettingTypes["graphSize"],
+  );
 
-  const toggleGraphSize = async (size: SettingTypes["graphSize"]) => {
-    await updateSettingAtom("graphSize", size);
+  const changeGraphSize = async (value: number[]) => {
+    await updateSettingAtom("graphSize", sizeOptions[value[0]]);
   };
 
   return (
-    <div className="flex items-center space-x-4 py-4">
-      <Label className="text-lg">Line Chart Size</Label>
-      <Select value={settings.graphSize} onValueChange={toggleGraphSize}>
-        <SelectTrigger className="w-[180px]">
-          <SelectValue placeholder="Please select" />
-        </SelectTrigger>
-        <SelectContent>
-          {sizes.map((size) => (
-            <SelectItem key={size} value={size}>
-              {size.toUpperCase()}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+    <div className="my-4 w-96 ">
+      <Label className="block text-lg mb-2">Line Chart Size</Label>
+      <Slider
+        min={0}
+        max={sizeOptions.length - 1}
+        step={1}
+        value={[sizeIndex]}
+        onValueChange={changeGraphSize}
+        className="w-full mt-4"
+      />
+      <div className="flex justify-between text-sm mt-2">
+        {sizeOptions.map((size) => (
+          <span key={size}>{size.toUpperCase()}</span>
+        ))}
+      </div>
     </div>
   );
 };
diff --git a/src/types/settingsType.ts b/src/types/settingsType.ts
index 8530a93..4d842ee 100644
--- a/src/types/settingsType.ts
+++ b/src/types/settingsType.ts
@@ -1,9 +1,9 @@
-import type { sizes } from "@/consts/chart";
+import type { sizeOptions } from "@/consts/chart";
 import type { ChartDataType } from "./hardwareDataType";
 
 export type Settings = {
   language: string;
   theme: "light" | "dark";
   display_targets: Array<ChartDataType>;
-  graphSize: (typeof sizes)[number];
+  graphSize: (typeof sizeOptions)[number];
 };