refactor: Update Slider component in Playground for default values

HasanYahya101 · Jun 4, 2024 · 7fe9d27 · 7fe9d27
1 parent 58d36c0
commit 7fe9d27
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/components/component/playground.jsx b/src/components/component/playground.jsx
@@ -249,23 +249,23 @@ export function Playground() {
                                 <div className="flex items-center gap-4">
                                     <div
                                         className="w-16 text-right text-sm font-medium text-gray-500 dark:text-gray-400">Hue</div>
-                                    <Slider className="flex-1" defaultValue={[defaultHue]} max={360} step={1} onValueChange={(value) => setDefaultHue(value)}
+                                    <Slider className="flex-1" value={[defaultHue]} max={360} step={1} onValueChange={(value) => setDefaultHue(value)}
                                     />
                                     <div
                                         className="w-16 text-right text-sm font-medium text-gray-900 dark:text-gray-50">{defaultHue}°</div>
                                 </div>
                                 <div className="flex items-center gap-4">
                                     <div
                                         className="w-16 text-right text-sm font-medium text-gray-500 dark:text-gray-400">Saturation</div>
-                                    <Slider className="flex-1" defaultValue={[defaultSaturation]} max={100} step={1} onValueChange={(value) => setDefaultSaturation(value)}
+                                    <Slider className="flex-1" value={[defaultSaturation]} max={100} step={1} onValueChange={(value) => setDefaultSaturation(value)}
                                     />
                                     <div
                                         className="w-16 text-right text-sm font-medium text-gray-900 dark:text-gray-50">{defaultSaturation}%</div>
                                 </div>
                                 <div className="flex items-center gap-4">
                                     <div
                                         className="w-16 text-right text-sm font-medium text-gray-500 dark:text-gray-400">Brightness</div>
-                                    <Slider className="flex-1" defaultValue={[defaultBrightness]} max={100} step={1} onValueChange={(value) => setDefaultBrightness(value)}
+                                    <Slider className="flex-1" value={[defaultBrightness]} max={100} step={1} onValueChange={(value) => setDefaultBrightness(value)}
                                     />
                                     <div
                                         className="w-16 text-right text-sm font-medium text-gray-900 dark:text-gray-50">{defaultBrightness}%</div>