基本完成颜色分量选择条组件。

src/components/ColorRangePicker.module.css

@@ -0,0 +1,23 @@
+@layer components {
+  .picker_container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    gap: var(--spacing-xs);
+    .title_row {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+      label {
+        flex: 1;
+        font-size: var(--font-size-xs);
+      }
+      & > span {
+        text-align: right;
+        font-size: var(--font-size-xs);
+      }
+    }
+  }
+}

src/components/ColorRangePicker.tsx

@@ -0,0 +1,60 @@
+import cx from 'clsx';
+import { isEqual } from 'lodash-es';
+import { ChangeEvent, useEffect, useState } from 'react';
+import styles from './ColorRangePicker.module.css';
+
+type ColorRangePickerProps = {
+  title: string;
+  value?: number;
+  onChange: (value: number) => void;
+  startColor: string;
+  endColor: string;
+  min?: number;
+  max: number;
+  step?: number;
+  valueProcess?: (value: number) => number;
+};
+
+export function ColorRangePicker({
+  title,
+  value = 0,
+  onChange,
+  startColor,
+  endColor,
+  min = 0,
+  max = 100,
+  step = 1,
+  valueProcess = (v) => v,
+}: ColorRangePickerProps) {
+  const [pickerValue, setPickerValue] = useState(value);
+  const handlePickerChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    const value = evt.target.value as number;
+    setPickerValue(valueProcess(value));
+    onChange?.(valueProcess(value));
+  };
+
+  useEffect(() => {
+    if (!isEqual(value, pickerValue)) {
+      setPickerValue(value);
+    }
+  }, [value]);
+
+  return (
+    <div className={styles.picker_container}>
+      <div className={styles.title_row}>
+        <label>{title}</label>
+        <span>{pickerValue}</span>
+      </div>
+      <input
+        type="range"
+        className={cx('picker')}
+        value={pickerValue}
+        onChange={handlePickerChange}
+        min={min}
+        max={max}
+        step={step}
+        style={{ background: `linear-gradient(to right, ${startColor} 0%, ${endColor} 100%)` }}
+      />
+    </div>
+  );
+}