フォーム・お問い合わせコード生成用
数値を選ぶスライダー
つまみを動かして、予算や人数をおおまかに選ぶ。
用途・説明
つまみを左右に動かして数値を選ぶスライダーを作ります。予算の目安、利用人数、期間など、正確な数字よりも「だいたいこのくらい」を選んでもらう場面に向いています。現在の値をつまみの上に大きく表示し、最小・最大の目盛りも添えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[項目名]- 例：ご予算の目安
[最小値・最大値・刻み]- 例：10万円〜100万円、5万円刻み
[単位]- 例：万円、名
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUIに詳しいフロントエンドエンジニアです。 以下の条件で「数値を選ぶスライダー」を実装してください。 ## 表示内容 - 項目名：[項目名] - 範囲：[最小値・最大値・刻み] - 現在の値を、項目名の右に大きく表示する（単位：[単位]） - スライダーの下の両端に、最小値と最大値 ## デザイン - 標準の input type="range" を使い、見た目を整える - レール：高さ 6px、角丸 999px、背景 #E2E8F0。つまみより左側は #1463F0 で塗る - つまみ：直径 24px、背景 #FFFFFF、枠線 2px solid #1463F0、影 0 2px 6px rgba(27, 42, 68, 0.2) - 現在の値：24px、font-weight 700、色 #1463F0。単位は 14px - 最小値・最大値：12px、色 #5F6D84 - focus-visible：つまみの外側に #1463F0 の不透明度 0.18 のリング 4px ## 動作 - つまみを動かしている間、現在の値をすぐに更新する - 左側の塗りは、値に合わせて CSS変数（--percent）で幅を変える - WebKit と Firefox の両方で同じ見た目になるよう、それぞれの疑似要素を指定する ## アクセシビリティ - label 要素と関連付ける - aria-valuetext で「50万円」のように単位つきで読み上げられるようにする - 左右の矢印キーで1刻みずつ動かせる - つまみのタップ領域は 44×44px 以上 - 正確な数値が必要な場合に備えて、数値を直接入力できる欄を併設する例も示す ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。