feat: advanced prompt (#1330)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: Gillian97 <jinling.sunshine@gmail.com>

web/app/components/base/slider/index.tsx

@@ -5,11 +5,13 @@ type ISliderProps = {
   max?: number
   min?: number
   step?: number
+  disabled?: boolean
   onChange: (value: number) => void
 }
 
-const Slider: React.FC<ISliderProps> = ({ max, min, step, value, onChange }) => {
+const Slider: React.FC<ISliderProps> = ({ max, min, step, value, disabled, onChange }) => {
   return <ReactSlider
+    disabled={disabled}
     value={isNaN(value) ? 0 : value}
     min={min || 0}
     max={max || 100}

web/app/components/base/slider/style.css

@@ -1,6 +1,9 @@
 .slider {
     position: relative;
 }
+.slider.disabled {
+    opacity: 0.6;
+}
 
 .slider-thumb {
     width: 18px;
@@ -19,7 +22,7 @@
 }
 
 .slider-track {
-    background-color: #9CA3AF;
+    background-color: #528BFF;
     height: 2px;
 }