From 6b4e556a7a6d178f6f808fcfabc9b6bf6c952b47 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 21 Oct 2024 22:20:10 +0700
Subject: [PATCH] fix: context-lenght-value (#3854)

---
 web/containers/ModelSetting/SettingComponent.tsx | 1 +
 web/containers/SliderRightPanel/index.tsx        | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

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">