時間範囲セレクター

TimeRangeSelectorコンポーネントは、学習時間や作業時間を選択するためのインタラクティブなタイムラインコンポーネントです。0時から23時までの24時間タイムラインをドラッグして時間範囲を選択でき、分単位（デフォルト15分刻み）の精度で時間を設定できます。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

ドラッグ選択: タイムライン上をドラッグして時間範囲を選択
分単位の精度: 15分、30分などのステップで精密な時間設定
24時間表示: 0時から23時までの完全な1日表示
現在時刻表示: 現在の時刻をハイライト表示
ビジュアルフィードバック: 選択範囲を視覚的に表示
時間情報カード: 選択した時間範囲と学習時間を表示
時刻アイコン: 朝（🌅）、昼（☀️）、夕方（🌆）、夜（🌙）のアイコン
テーマ対応: ライトテーマとダークテーマの自動切り替え
レスポンシブ: モバイルファーストのレスポンシブデザイン

使用方法

---
import { TimeRangeSelector } from '@karan-monorepo/ui-core';
---

<kds-time-range-selector
  theme="light"
  start-hour={9}
  start-minute={0}
  end-hour={10}
  end-minute={30}
/>

プロパティ

プロパティ	型	デフォルト	説明
`theme`	`'light' \| 'dark'`	`'light'`	コンポーネントのカラーテーマ
`startHour`	`number`	`-1`	開始時刻の時（0-23、-1で現在時刻）
`startMinute`	`number`	`0`	開始時刻の分（0-59）
`endHour`	`number`	`-1`	終了時刻の時（0-23、-1で現在時刻+1時間）
`endMinute`	`number`	`0`	終了時刻の分（0-59）
`minDuration`	`number`	`15`	最小時間範囲（分）
`stepMinutes`	`number`	`15`	時間刻み（分）

データ構造

TimeRange

interface TimeRange {
  startHour: number;
  startMinute: number;
  endHour: number;
  endMinute: number;
  durationMinutes: number;
}

使用例

TimeRangeSelector Component

Interactive timeline component for selecting time ranges with minute-level precision and drag-to-select functionality.

Themes

Light Theme

Dark Theme

Different Time Ranges

Morning Session (Short Duration)

Afternoon Session (Medium Duration)

Evening Session (Long Duration)

Custom Step Intervals

15-Minute Steps (Default)

30-Minute Steps

Usage Examples

Empty State (User Selection)

Drag on the timeline below to select a time range

Pre-selected Time Range

9:00 AM - 12:00 PM (3 hours)

イベント

time-range-change

時間範囲が選択されたときに発火します。

const selector = document.querySelector('kds-time-range-selector');
selector.addEventListener('time-range-change', (event) => {
  console.log('Selected time range:', event.detail);
  // {
  //   startHour: 9,
  //   startMinute: 0,
  //   endHour: 10,
  //   endMinute: 30,
  //   durationMinutes: 90
  // }
});

基本的な使用例

空の状態（ユーザー選択）

<kds-time-range-selector
  theme="light"
  start-hour={-1}
  end-hour={-1}
/>

事前選択された時間範囲

<kds-time-range-selector
  theme="light"
  start-hour={9}
  start-minute={0}
  end-hour={12}
  end-minute={0}
/>

カスタムステップ間隔

<!-- 30分刻み -->
<kds-time-range-selector
  theme="light"
  step-minutes={30}
/>

<!-- 15分刻み（デフォルト） -->
<kds-time-range-selector
  theme="light"
  step-minutes={15}
/>

最小時間範囲の設定

<!-- 最低30分の選択を要求 -->
<kds-time-range-selector
  theme="light"
  min-duration={30}
/>

使用ケース

学習時間の記録

<div class="learning-tracker">
  <h3>今日の学習時間を選択</h3>
  <kds-time-range-selector
    theme="light"
    start-hour={-1}
    end-hour={-1}
  />
</div>

<script>
  const selector = document.querySelector('kds-time-range-selector');
  selector.addEventListener('time-range-change', (event) => {
    const { startHour, startMinute, endHour, endMinute, durationMinutes } = event.detail;
    console.log(`学習時間: ${startHour}:${startMinute} - ${endHour}:${endMinute}`);
    console.log(`学習時間: ${durationMinutes}分`);

    // Save to database
    saveStudySession({
      start: `${startHour}:${startMinute}`,
      end: `${endHour}:${endMinute}`,
      duration: durationMinutes
    });
  });
</script>

勤務時間の記録

<div class="work-time-tracker">
  <h3>勤務時間を選択</h3>
  <kds-time-range-selector
    theme="light"
    start-hour={9}
    start-minute={0}
    end-hour={18}
    end-minute={0}
    step-minutes={30}
  />
</div>

イベントスケジューリング

<div class="event-scheduler">
  <h3>イベントの時間帯を選択</h3>
  <kds-time-range-selector
    theme="light"
    start-hour={14}
    start-minute={0}
    end-hour={16}
    end-minute={0}
    min-duration={60}
  />
</div>

インタラクション

ドラッグ選択

タイムライン上の任意の時刻をクリック（またはタッチ）
開始時刻から終了時刻までドラッグ
マウスを離すと時間範囲が確定
time-range-changeイベントが発火

キーボードナビゲーション

タイムライン上でマウスホバーして選択範囲を確認
クリックして時間範囲を設定

ビジュアルインジケーター

時間ブロック

通常: 標準背景色
選択範囲: 強調表示された背景色
範囲開始: 左側に青い境界線
範囲終了: 右側に紫の境界線
現在時刻: 「NOW」バッジと特別な背景色

時刻表示

整時: 大きなフォントで時刻を表示（例: 09:00）
分表示: 小さなフォントで分を表示（例: :15、:30、:45）
アイコン: 6時（🌅）、12時（☀️）、18時（🌆）、0時（🌙）

情報カード

空の状態: 選択方法のガイド表示
選択状態: 選択した時間範囲と総学習時間を表示
グラデーション背景: 選択時は紫のグラデーション

スタイリング

TimeRangeSelectorコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
カラー: ライト/ダークテーマに対応したカラートークン
スペーシング: デザインシステムのスペーシングトークン
レスポンシブ: モバイルファーストのレスポンシブデザイン
トランジション: スムーズなホバーと選択効果
シャドウ: 深度を表現する洗練されたシャドウ

アクセシビリティ

TimeRangeSelectorコンポーネントには適切なアクセシビリティ機能が含まれています：

マウスとタッチの両方に対応
明確な視覚的フィードバック
高コントラスト比による視認性の確保
適切なラベルと説明文
スクリーンリーダー対応の構造

ベストプラクティス

適切なステップを選択して使いやすい粒度を提供する
最小時間を設定して無効な選択を防ぐ
デフォルト値を提供してユーザーエクスペリエンスを向上させる
イベントリスナーを追加して選択された時間を処理する
バリデーションを実装して有効な時間範囲を確保する
フィードバックを提供して選択が成功したことを確認する
両方のテーマでテストして良好なコントラストと可読性を確保する

パフォーマンス

効率的なイベント処理でスムーズなドラッグ操作
最適化されたレンダリングで大量の時間ブロックを表示
メモリ効率の良い状態管理

レスポンシブデザイン

TimeRangeSelectorコンポーネントはモバイルファーストで設計されています：

デスクトップ: フル機能の24時間タイムライン
タブレット: 調整されたレイアウトで使いやすさを維持
モバイル: タッチ操作に最適化されたインターフェース
スクロール: 長いタイムラインでスムーズなスクロール

ブラウザサポート

TimeRangeSelectorコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

CSS Custom Properties
Web Components (Lit)
CSS Flexbox
CSS Grid
Mouse and Touch Events
JavaScript Date API