今天建立 src/components/PreferenceSlider.js，讓信心水準變成使用者可以互動調整的設定，而不是寫死的數字。

在 index.html 加入滑桿

<div class="preference">
  <label for="confidence-slider">信心水準：<span id="confidence-value">80%</span></label>
  <input type="range" id="confidence-slider" min="50" max="99" value="80" />
</div>

建立 PreferenceSlider 元件

// src/components/PreferenceSlider.js
export function setupConfidenceSlider(onChange) {
  const slider = document.getElementById('confidence-slider');
  const valueLabel = document.getElementById('confidence-value');

  slider.addEventListener('input', () => {
    const percent = Number(slider.value);
    valueLabel.textContent = `${percent}%`;
    onChange(percent / 100);
  });

  // 回傳目前值，方便初始化時使用
  return Number(slider.value) / 100;
}

在 main.js 中串接

// src/main.js
import { setupConfidenceSlider } from './components/PreferenceSlider.js';

let currentConfidence = 0.8;

const initialConfidence = setupConfidenceSlider((newConfidence) => {
  currentConfidence = newConfidence;
  const deadline = new Date(); // 示範：假設使用者希望「現在」到達
  deadline.setMinutes(deadline.getMinutes() + 60);
  suggestDeparture(deadline, currentConfidence);
});

currentConfidence = initialConfidence;

小體驗細節：即時反饋

拉動滑桿時，畫面上的建議出發時間應該要跟著即時更新，讓使用者能直覺感受到「信心水準拉高，出發時間會提早」這件事。

這種「操作 → 立即看到結果」的回饋迴圈，是介面設計中很重要的一環，能幫助使用者建立對系統邏輯的信任感，而不是把它當成一個看不懂的黑盒子。

第四階段完成

到這裡，SyncETA Lite 已經具備了推薦系統最核心的雛形：資料 → 分位數運算 → 使用者可調整的信心水準 → 具體的出發時間建議。

從明天開始的第五階段，我們要把重心轉向使用者體驗優化：離線功能、推播通知、響應式設計，讓這個系統從「能動」進化到「好用」。