範囲入力の値バブル

HTMLの範囲入力は次のようなものです。

それらをサポートするブラウザでは、彼らは次のように見えます：

今ではそれが素晴らしいです。最小値と最大値が強制されているユーザーから番号を収集したい場合は、それを使用できます。

しかし、奇妙なことに気づきますか？それ自体では、その範囲の入力は、実際に提出する番号がユーザーに通信しません。今、あなたの入力が「お元気ですか？ - それでは、おそらくユーザーに番号を表示する必要はありません。しかし、私はあなたがそれを見せないよりもあなたが数を表示する必要があることをより一般的に賭けます。

公平を期すために、仕様は次のように述べています。

入力要素は、要素の値を数値を表す文字列に設定するためのコントロールを表しますが、正確な値は重要ではないという警告があり、UASは数値状態よりも単純なインターフェイスを提供します。

しかし、クールなスライダーが必要なからといって、自動的にユーザーが提出された値を知ることを防ぐ必要があるという意味ではありません。ブラウザがUIコントロールを変更してその数を表示する必要があるとは限りません。私たちはそれを自分で構築するべきだと言っています！

これは、フォーム要素によって計算された値に特化した

タグの完璧なユースケースです。これがあなたがそれをどのように使用するかについての非常にシンプルな実装です：

 
<output for="foo" onforminput="value = foo.valueasnumber;"> </output>

アップデート！バニラJavaScriptを使用した新しいバージョンもあります。

ここでの目標は、範囲入力の現在の値を示す「バブル」を表示することです。

入力の値から「バブル」の値を設定することは、範囲の値を引いてバブルに陥る問題です。

 range.addeventlistener（ "input"、（）=> {
  bubble.innerhtml = rangel.value;
}）;

トリックは、バブルを範囲入力に沿って配置することで、「親指」に沿ってスライドします。そのためには、バブルを左にスクーティングする必要がある％を計算する必要があります。それで、物事をスミッジクリーナーに保つためにそれを行うための機能を作りましょう：

 range.addeventlistener（ "input"、（）=> {
  SetBubble（範囲、バブル）;
}）;

関数setBubble（範囲、バブル）{
  const val = range.value;
  const min = range.min？ range.min：0;
  const max = range.max？ range.max：100;
  const newval = number（（（val -min） * 100） /（max -min））;
  bubble.innerhtml = val;

  //ネイティブUIの親指のサイズに基づいて魔法の数字を並べ替える
  bubble.style.left = newval = "％";
}

ここでは、範囲入力minとmax属性を説明し、その範囲の現在の値に基づいて0〜100の間のポジションを計算することを確認します。すべての範囲がデフォルトの0〜100の数値であるわけではないため、範囲が0〜200の範囲で値50であったと言いますが、それは25％です。これはそれを説明します。

しかし、それには1つの迷惑な欠陥があります。バブルは、スタートの左に遠すぎ、最後の右側まで遠すぎます。範囲の入力では、親指が左端から垂れ下がらないため、中央が最初にあり、最後に同じです。スクロールバーのように、親指の端がトラック内に止まります。

ブラウザ全体できちんと機能するように見えるいくつかの魔法の数字を使用できます。

 //ネイティブUIの親指のサイズに基づいて魔法の数字を並べ替える
  bubble.style.left = `calc（$ {newval}％（$ {8 -newval * 0.15} px））`;

これがその最終的なデモです：

読者のMaxglobaが彼らのバージョンに書いたので、私はこれを突くように促されました：ここに投稿します：

Maxのバージョンのクールな側面は、範囲入力がCSSスタイルであるため、親指の正確なサイズがわかっていることです。 JavaScript数学にはむしろ魔法を感じる数字がいくつかありますが、少なくともそれらは親指のサイズについてCSSに設定された実数に基づいています。

他のバージョン

デイブ・オルセンは、jQueryに依存しないように（元の）アイデアを移植しました。これがそのバージョンです：

ショーン・ストップニク：

Simurai：

ヴィンセント・デュランド：

範囲の入力には、ちょっとクールなノッチをほとんど入れないデータリストがあります。

Ana Tudorには大規模なコレクションがあり、その多くはデザインを通じて現在の値を示しています。

？この投稿のオリジナルバージョンの古いバージョン（jQuery、さらには機能しません）

歴史的な理由でこれをここに残してください。

友人のjqueryを引き込み、CSSをつけましょう。この目標は以下です。任意の範囲入力、いつでも、任意のmin/max/step - 現在の値を示すバブルを上に置きます。

最初に出力要素をスタイルしましょう。絶対に入力の上に配置します。これにより、JavaScriptがどうあるべきかを把握したら、左値も調整することができます。グラデーションとボーダーラジウスでそれを空想し、擬似エレメントで小さなポインタートライアングルを追加します。

出力{ 
  位置：絶対;
  背景画像：線形勾配（TOP、＃444444、＃999999）;
  幅：40px; 
  高さ：30px; 
  テキストアライグ：センター; 
  色：白; 
  ボーダーラジウス：10px; 
  ディスプレイ：インラインブロック。 
  フォント：Bold 15px/30px Georgia;
  下：175％;
  左：0;
  マージン左：-1％;
}
出力：後{ 
  コンテンツ： "";
  位置：絶対;
  幅：0;
  高さ：0;
  ボーダートップ：10pxソリッド＃999999;
  国境左：5px固体透明。
  国境右：5px固体透明。
  トップ：100％;
  左：50％;
  マージン左：-5px;
  マージントップ：-1px;
}

ここで、私たちがする必要があるのは、すべての範囲入力を監視して、その価値を変えることです。私たちの目標は、バブルの左の位置をスライダーとペースでシフトすることです。それは世界で最も単純なものではありません。スライダーは、任意の幅であり、最小値または最大値であることです。少し数学をしなければなりません。これがすべてのjquery javascriptです。

 // DOM READY
$（function（）{
 Var El、NewPoint、Newplace、Offset;
 
 //すべての範囲の入力を選択し、変更に注意してください
 $（ "input [type = 'range']"）。change（function（）{{
 
   //効率のためにこれをキャッシュします
   el = $（this）;
   
   //範囲入力の幅を測定します
   width = el.width（）;
   
   //入力の左右の間の配置率を把握する
   newpoint =（el.val（） -  el.attr（ "min"）） /（el.attr（ "max"） -  el.attr（ "min"））;
   
   //ポインターをより良く並べるためのJanky値
   オフセット= -1.3;
   
   //バブルが左または右を越えて行くのを防ぐ（サポートされていないブラウザ）
   if（newpoint  1）{newplace = width; }
   else {newplace = width * newpoint offset;オフセット -  = newpoint; }
   
   //バブルを移動します
   エル
     .next（ "output"）
     .css（{
       左：新しい場所、
       マージン左：オフセット「％」
     }）
     .text（el.val（））;
 }）
 //ページロードでの位置バブルへの変更を偽造
 .trigger（ 'change'）;
}）;

そこにある1つのグロス部分は、その1.3値です。バブルの三角形の先端をスライダーの中心に並べようとしていました。スライダーの中心が左または右に100％または右にないため、簡単ではありません。その価値は完全ではなく、完全に実装されていませんが、それを持っていないよりはましです。

ボーナスとして、範囲入力をサポートしないブラウザはバブルアクションを取得します。

上記のコードは、指定されたMINと最大値を持つ範囲入力に依存します。そうでなければ、それはちょっと壊れます。これらのことを指定せずに範囲の入力を使用するのは奇妙だと思いますが、そうでない場合はデフォルトと100と思われます。これを防ぐために、各属性をつかんでテストし、正しく修正していない場合はテストします。次のようなもの：

 var minvalue、maxvalue;
if（！el.attr（ "min"））{minvalue = 0; } else {minvalue = el.attr（ "min"）; }

…次に、数学でminvalue変数を使用します。そして、最大で同様のことをします。とにかく、これがライブデモです：

以上が範囲入力の値バブルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。