diff --git a/app/components/input-range.module.scss b/app/components/input-range.module.scss
new file mode 100644
index 00000000..5a555a45
--- /dev/null
+++ b/app/components/input-range.module.scss
@@ -0,0 +1,7 @@
+.input-range {
+  border: var(--border-in-light);
+  border-radius: 10px;
+  padding: 5px 15px 5px 10px;
+  font-size: 12px;
+  display: flex;
+}
diff --git a/app/components/input-range.tsx b/app/components/input-range.tsx
new file mode 100644
index 00000000..a8ee9532
--- /dev/null
+++ b/app/components/input-range.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import styles from "./input-range.module.scss";
+
+interface InputRangeProps {
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  title?: string;
+  value: number | string;
+  className?: string;
+  min: string;
+  max: string;
+  step: string;
+}
+
+export function InputRange({
+  onChange,
+  title,
+  value,
+  className,
+  min,
+  max,
+  step,
+}: InputRangeProps) {
+  return (
+    <div className={styles["input-range"] + ` ${className ?? ""}`}>
+      {title || value}
+      <input
+        type="range"
+        title={title}
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        onChange={onChange}
+      ></input>
+    </div>
+  );
+}
diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index a14f6473..ed1c28ee 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -32,6 +32,7 @@ import { UPDATE_URL } from "../constant";
 import { SearchService, usePromptStore } from "../store/prompt";
 import { requestUsage } from "../requests";
 import { ErrorBoundary } from "./error";
+import { InputRange } from "./input-range";
 
 function SettingItem(props: {
   title: string;
@@ -274,8 +275,7 @@ export function Settings(props: { closeSettings: () => void }) {
             title={Locale.Settings.FontSize.Title}
             subTitle={Locale.Settings.FontSize.SubTitle}
           >
-            <input
-              type="range"
+            <InputRange
               title={`${config.fontSize ?? 14}px`}
               value={config.fontSize}
               min="12"
@@ -287,7 +287,7 @@ export function Settings(props: { closeSettings: () => void }) {
                     (config.fontSize = Number.parseInt(e.currentTarget.value)),
                 )
               }
-            ></input>
+            ></InputRange>
           </SettingItem>
 
           <SettingItem title={Locale.Settings.TightBorder}>
@@ -407,8 +407,7 @@ export function Settings(props: { closeSettings: () => void }) {
             title={Locale.Settings.HistoryCount.Title}
             subTitle={Locale.Settings.HistoryCount.SubTitle}
           >
-            <input
-              type="range"
+            <InputRange
               title={config.historyMessageCount.toString()}
               value={config.historyMessageCount}
               min="0"
@@ -420,7 +419,7 @@ export function Settings(props: { closeSettings: () => void }) {
                     (config.historyMessageCount = e.target.valueAsNumber),
                 )
               }
-            ></input>
+            ></InputRange>
           </SettingItem>
 
           <SettingItem
@@ -467,8 +466,7 @@ export function Settings(props: { closeSettings: () => void }) {
             title={Locale.Settings.Temperature.Title}
             subTitle={Locale.Settings.Temperature.SubTitle}
           >
-            <input
-              type="range"
+            <InputRange
               value={config.modelConfig.temperature?.toFixed(1)}
               min="0"
               max="2"
@@ -482,7 +480,7 @@ export function Settings(props: { closeSettings: () => void }) {
                       )),
                 );
               }}
-            ></input>
+            ></InputRange>
           </SettingItem>
           <SettingItem
             title={Locale.Settings.MaxTokens.Title}
@@ -508,8 +506,7 @@ export function Settings(props: { closeSettings: () => void }) {
             title={Locale.Settings.PresencePenlty.Title}
             subTitle={Locale.Settings.PresencePenlty.SubTitle}
           >
-            <input
-              type="range"
+            <InputRange
               value={config.modelConfig.presence_penalty?.toFixed(1)}
               min="-2"
               max="2"
@@ -523,7 +520,7 @@ export function Settings(props: { closeSettings: () => void }) {
                       )),
                 );
               }}
-            ></input>
+            ></InputRange>
           </SettingItem>
         </List>
       </div>
diff --git a/app/styles/globals.scss b/app/styles/globals.scss
index 6492b000..53902d93 100644
--- a/app/styles/globals.scss
+++ b/app/styles/globals.scss
@@ -159,19 +159,11 @@ input[type="checkbox"]:checked::after {
 
 input[type="range"] {
   appearance: none;
-  border: var(--border-in-light);
-  border-radius: 10px;
-  padding: 5px 15px 5px 10px;
   background-color: var(--white);
   color: var(--black);
-
-  &::before {
-    content: attr(value);
-    font-size: 12px;
-  }
 }
 
-input[type="range"]::-webkit-slider-thumb {
+@mixin thumb() {
   appearance: none;
   height: 8px;
   width: 20px;
@@ -180,11 +172,36 @@ input[type="range"]::-webkit-slider-thumb {
   cursor: pointer;
   transition: all ease 0.3s;
   margin-left: 5px;
+  border: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  @include thumb();
+}
+
+input[type="range"]::-moz-range-thumb {
+  @include thumb();
+}
+
+input[type="range"]::-ms-thumb {
+  @include thumb();
+}
+
+@mixin thumbHover() {
+  transform: scaleY(1.2);
+  width: 24px;
 }
 
 input[type="range"]::-webkit-slider-thumb:hover {
-  transform: scaleY(1.2);
-  width: 24px;
+  @include thumbHover();
+}
+
+input[type="range"]::-moz-range-thumb:hover {
+  @include thumbHover();
+}
+
+input[type="range"]::-ms-thumb:hover {
+  @include thumbHover();
 }
 
 input[type="number"],