diff --git a/web/containers/ModelSetting/SettingComponent.tsx b/web/containers/ModelSetting/SettingComponent.tsx
index 43df16430..ac45b0f06 100644
--- a/web/containers/ModelSetting/SettingComponent.tsx
+++ b/web/containers/ModelSetting/SettingComponent.tsx
@@ -25,6 +25,7 @@ const SettingComponent: React.FC<Props> = ({
       case 'slider': {
         const { min, max, step, value } =
           data.controllerProps as SliderComponentProps
+
         return (
           <SliderRightPanel
             key={data.key}
diff --git a/web/containers/SliderRightPanel/index.tsx b/web/containers/SliderRightPanel/index.tsx
index c00d9f002..3fad10212 100644
--- a/web/containers/SliderRightPanel/index.tsx
+++ b/web/containers/SliderRightPanel/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Slider, Input, Tooltip } from '@janhq/joi'
 
@@ -32,6 +32,10 @@ const SliderRightPanel = ({
 
   useClickOutside(() => setShowTooltip({ max: false, min: false }), null, [])
 
+  useEffect(() => {
+    setVal(value.toString())
+  }, [value])
+
   return (
     <div className="flex flex-col">
       <div className="mb-3 flex items-center gap-x-2">