スライダー Slider
つまみをドラッグして範囲内の値を選択するフォーム要素。
ライブデモ
ソースコード
<div class="demo-slider-group">
<div class="demo-slider-header">
<label class="demo-slider-label" for="demo-range">音量</label>
<span class="demo-slider-value" id="demo-range-value">50</span>
</div>
<input type="range" class="demo-slider-input" id="demo-range" min="0" max="100" value="50" />
<div class="demo-slider-minmax">
<span>0</span><span>100</span>
</div>
</div>.demo-slider-group { max-width: 300px; }
.demo-slider-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.demo-slider-label { font-size: 13px; font-weight: 600; color: #333; }
.demo-slider-value { font-size: 13px; font-weight: 700; color: var(--ui-primary); }
.demo-slider-input {
width: 100%; height: 6px; appearance: none; background: #e5e7eb;
border-radius: 3px; outline: none;
}
.demo-slider-input::-webkit-slider-thumb {
appearance: none; width: 20px; height: 20px;
background: var(--ui-primary); border-radius: 50%; cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transition: transform 0.15s;
}
.demo-slider-input::-webkit-slider-thumb:hover { transform: scale(1.15); }
.demo-slider-input::-moz-range-thumb {
width: 20px; height: 20px; background: var(--ui-primary);
border-radius: 50%; cursor: pointer; border: none;
}
.demo-slider-minmax { display: flex; justify-content: space-between; font-size: 11px; color: #999; margin-top: 4px; }document.getElementById('demo-range').addEventListener('input', function() {
document.getElementById('demo-range-value').textContent = this.value;
});AIプロンプト
Basic
スライダーをHTML/CSSで作ってください。つまみをドラッグして0〜100の値を選択できます。
Custom
以下の仕様でスライダーを実装してください。 - プライマリカラー: #2563eb - つまみの上にツールチップで現在値を表示 - トラックの左側（選択済み部分）に色を付ける - ステップ表示（目盛り付き） - ダブルスライダー（範囲選択） - 値変更時のアニメーション
Advanced
高機能なスライダーを実装してください。 - ダブルサム（範囲選択）対応 - aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext を使用 - キーボード操作（矢印キーで1ステップ、PageUp/Downで10ステップ） - タッチデバイスでのスムーズなドラッグ - カスタムステップ値（非線形スケール対応） - 目盛りラベル表示 - リアルタイムでの値フォーマット（通貨、パーセントなど） - prefers-reduced-motion対応