feat: add slider, color, and time field renderers

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/ui/field-renderers.ts

@@ -262,6 +262,99 @@ function renderTags(
   };
 }
 
+function renderSlider(
+  controlEl: HTMLDivElement,
+  field: FormField,
+  initialValue?: FieldValue,
+): { getValue: () => FieldValue; setValue: (v: FieldValue) => void } {
+  const min = field.min ?? 0;
+  const max = field.max ?? 100;
+  const step = field.step ?? 1;
+  const startVal = initialValue !== undefined ? Number(initialValue) : min;
+
+  const wrapper = controlEl.createDiv({ cls: 'ff-slider-wrapper' });
+  const input = wrapper.createEl('input', {
+    cls: 'ff-slider',
+    type: 'range',
+  });
+  input.min = String(min);
+  input.max = String(max);
+  input.step = String(step);
+  input.value = String(startVal);
+
+  const valueLabel = wrapper.createSpan({
+    cls: 'ff-slider-value',
+    text: String(startVal),
+  });
+
+  input.addEventListener('input', () => {
+    valueLabel.textContent = input.value;
+  });
+
+  return {
+    getValue: () => Number(input.value),
+    setValue: (v) => {
+      input.value = String(v);
+      valueLabel.textContent = String(v);
+    },
+  };
+}
+
+function renderColor(
+  controlEl: HTMLDivElement,
+  _field: FormField,
+  initialValue?: FieldValue,
+): { getValue: () => FieldValue; setValue: (v: FieldValue) => void } {
+  const startVal =
+    initialValue !== undefined ? String(initialValue) : '#000000';
+
+  const wrapper = controlEl.createDiv({ cls: 'ff-color-wrapper' });
+  const input = wrapper.createEl('input', {
+    cls: 'ff-color-input',
+    type: 'color',
+  });
+  input.value = startVal;
+
+  const hexLabel = wrapper.createSpan({
+    cls: 'ff-color-hex',
+    text: startVal,
+  });
+
+  input.addEventListener('input', () => {
+    hexLabel.textContent = input.value;
+  });
+
+  return {
+    getValue: () => input.value,
+    setValue: (v) => {
+      input.value = String(v);
+      hexLabel.textContent = String(v);
+    },
+  };
+}
+
+function renderTime(
+  controlEl: HTMLDivElement,
+  field: FormField,
+  initialValue?: FieldValue,
+): { getValue: () => FieldValue; setValue: (v: FieldValue) => void } {
+  const input = controlEl.createEl('input', {
+    cls: 'ff-input',
+    type: 'time',
+    placeholder: field.placeholder ?? '',
+  });
+  if (initialValue !== undefined) {
+    input.value = String(initialValue);
+  }
+
+  return {
+    getValue: () => input.value,
+    setValue: (v) => {
+      input.value = String(v);
+    },
+  };
+}
+
 function renderNoteLink(
   app: App,
   controlEl: HTMLDivElement,
@@ -495,6 +588,15 @@ export function renderField(
     case 'rating':
       accessor = renderRating(controlEl, field, initialValue);
       break;
+    case 'slider':
+      accessor = renderSlider(controlEl, field, initialValue);
+      break;
+    case 'color':
+      accessor = renderColor(controlEl, field, initialValue);
+      break;
+    case 'time':
+      accessor = renderTime(controlEl, field, initialValue);
+      break;
     default:
       accessor = renderText(controlEl, field, initialValue);
       break;