スライダー間隔コンポーネントのネイティブ js 実装

この記事の例では、スライダー間隔コンポーネントを実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

機能要件:

1. 最小値は 0 で、指定された最大値に応じて間隔範囲が生成されます。
2. スライダーをドラッグすると、対応する範囲が表示され、スライダーバーに対応するステータスが表示されます。
3. クリックすると、最も近いスライダーがマウスをクリックした位置に移動します。

デフォルトの効果:

スライダーをドラッグすると、次のように表示されます。

分析:

まず、レイアウトを記述する必要があります。要素は全部で 4 つあり、スライダーが 2 つ、スライダーバーが 2 つあります。レイアウトするときは、後でスライダーとスライダーバーのイベントを監視し、イベントのバブリングを最小限に抑えることを考慮する必要があります。
スライダーをドラッグするときは、それが左のスライダーか右のスライダーかを区別します。
マウスのクリックイベントと mousedown イベントは互換性がある必要があります。ここでは mousedown イベントが統一的に使用されます。
左スライダーと右スライダーの最大値と最小値を決定します。
スライダーバーの表示は非常にシンプルです。幅は左右のスライダーの位置差、左の値は左のスライダーの左の値です。
イベント委任メカニズムが使用されているため、mousemove イベントと mouseup イベントでは、現在どのスライダーが操作されているかを判別できないため、マウスが押されると、現在操作されているオブジェクトが mousemove イベントに渡されます。

コードは以下に添付されています:

HTML 構造、スライダーをインスタンス化し、現在のスライダーの範囲を設定します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>スライド</title>
</head>
<本文>
 <スクリプトタイプ="モジュール">
 「./js/Slide.js」からスライドをインポートします。

 初期化();
 関数init(){
  //パラメータは最大範囲です。渡されない場合は、デフォルトは4000です
  slide = new Slide(4200); とします。
  slide.appendTo("本文");
 }

 </スクリプト>
</本文>
</html>

Slide.js ファイル: スライダーの作成、スライダーのドラッグ、スライダーのクリックの機能を実行します。

「./Utils.js」からUtilsをインポートします。
デフォルトクラススライドをエクスポートする{
 静的スタイルCss=false;
 //最小範囲 minNum=0;
 //最大範囲 maxNum;
 //左ボタンの左の値 leftBtnLeft=0;
 //右ボタンの左の値 rightBtnLeft=238;
 コンストラクター(_max=4000){
 //デフォルトの最大値は4000です
 this.maxNum=_max;
 this.elem = this.createElem();
 }
 要素を作成します（）{
 if(this.elem) は this.elem を返します。
 // 最も外側のコンテナを作成します。let div=Utils.createE("div");
 div.className="スライドコンテナ";
 div.innerHTML=`<p class="priceTxt">価格<span id="rangeText">￥${this.minNum}-${this.maxNum}</span></p>
 <div class="rangeContainer" id="rangeContainer">
  <div class="bgRange" id="bgRange"></div>
  <div class="価格範囲" id="価格範囲"></div>
  <span id="leftBtn" class="leftBtn"></span>
  <span id="rightBtn" class="rightBtn"></span>
 </div>`;
 Utils.getIdElem(div,this);
 //スタイルを設定する Slide.setStyles();
 //親要素の mousedown イベントをリッスンします this.rangeContainer.addEventListener("mousedown",e=>this.mouseHandler(e))
 div を返します。
 }
 親に追加{
 Utils.appendTo(this.elem,parent);
 }
 マウスハンドラ(e){
 //注: getBoundingClientRect() によって返される結果では、幅と高さの両方に境界線が含まれます。let rect=this.rangeContainer.getBoundingClientRect();
 スイッチ (e.type) {
  ケース「マウスダウン」:
  //マウスの高速ドラッグのデフォルト イベントをキャンセルします。e.preventDefault();
  this.x = e.offsetX;
  this.btnType=e.target.id;
  //背景バーがクリックされた場合、rangeClick関数を実行します。if(/Range/.test(this.btnType)){
   e.stopPropagation();
   //クリック関数 this.rangeClick(e);
   戻る;
  }
  //ボタンがクリックされた場合、ドキュメントのマウス移動イベントをリッスンします。this.mouseHandlers=e=>this.mouseHandler(e);
  document.addEventListener("mousemove", this.mouseHandlers);
  document.addEventListener("mouseup", this.mouseHandlers);
  壊す;
  ケース「マウス移動」:
  x = e.clientX - rect.x - this.x とします。
  //左ボタンと右ボタンの左の値を取得します。this.leftBtnLeft=parseInt(getComputedStyle(this.leftBtn).left);
  this.rightBtnLeft = parseInt(getComputedStyle(this.rightBtn).left);
  if (this.btnType === "leftBtn") {
   //左ボタンの値の範囲を決定します if (x < 0) x = 0;
   x が this.rightBtnLeft の場合、x は this.rightBtnLeft になります。
   this.leftBtn.style.left = x + "px";
  } そうでない場合 (this.btnType === "rightBtn") {
   // 右ボタンの値の範囲を、1px の境界線を引いて決定します。if (x < this.leftBtnLeft) x = this.leftBtnLeft;
   x が this.bgRange.offsetWidth - 2 より大きい場合、x は this.bgRange.offsetWidth - 2 になります。
   this.rightBtn.style.left = x + "px";
  }
  //テキスト範囲表示 this.changeRangeText();
  壊す;
  ケース「マウスアップ」:
  // 移動イベント リスナー document.removeEventListener("mousemove", this.mouseHandlers);
  document.removeEventListener("mouseup"、this.mouseHandlers);
  壊す;
 }
 }
 範囲クリック(e){
 //マウスのクリック位置の値を計算します。let click_X=e.clientX-this.rangeContainer.getBoundingClientRect().x-this.leftBtn.offsetWidth/2;
 //現在のクリック位置が左ボタンの左側にあるか、左ボタンと右ボタンが重なっている場合はクリック位置がボタンの左側にあるかを判断し、マウスがクリックされた位置に左ボタンを移動しますif(Math.abs(click_X-this.leftBtnLeft)<Math.abs(click_X-this.rightBtnLeft) || 
 (this.leftBtnLeft===this.rightBtnLeft && click_X<this.leftBtnLeft)) this.leftBtn.style.left=click_X+"px";
 // それ以外の場合は、マウスがクリックされた位置に右ボタンを移動します。else this.rightBtn.style.left=click_X+"px";
 // 移動後の左ボタンと右ボタンの左の値を取得します。this.leftBtnLeft=parseInt(getComputedStyle(this.leftBtn).left);
 this.rightBtnLeft = parseInt(getComputedStyle(this.rightBtn).left);
 //テキスト範囲表示 this.changeRangeText();
 }
 範囲テキストを変更する(){
 // 範囲の最小値と最大値を計算し、切り上げます。let minTxt=Math.round(this.leftBtnLeft/(this.bgRange.clientWidth-2)*this.maxNum);
 maxTxt=Math.round(this.rightBtnLeft/(this.bgRange.clientWidth-2)*this.maxNum); とします。
 this.rangeText.innerText=`￥${minTxt}-${maxTxt}`;
 //スライダーの色を変更します this.changeRangeSlide();
 }
 スライド範囲の変更(){
 //スライダーの幅は、左ボタンと右ボタンの間の距離に等しくなります。this.priceRange.style.width=this.rightBtnLeft-this.leftBtnLeft+"px";
 //スライダーの左の値は左ボタンの左の値と同じです。this.priceRange.style.left=this.leftBtnLeft+"px";
 }
 静的setStyles(){
 Slide.styleCss を返します。
 Slide.styleCss=true;
 Utils.insertCss(".slideContainer",{
  幅:"260px",
  高さ:"70px",
  マージン:"50px"
 })
 Utils.insertCss(".priceTxt",{
  フォントサイズ:"14px",
  色:"#666",
  マージン下:"20px"
 })
 Utils.insertCss(".priceTxt span",{
  フロート:"右"
 })
 Utils.insertCss(".rangeContainer",{
  幅:"260px",
  高さ:"20px",
  位置:"相対",
 })
 Utils.insertCss(".bgRange",{
  幅:"240px",
  高さ:"3px",
  背景色:"#dedede",
  位置:"絶対",
  左:"10px",
  上:"9px"
 })
 Utils.insertCss(".priceRange",{
  幅:"240px",
  高さ:"3px",
  背景:"#ffa800",
  位置:"絶対",
  左:"10px",
  上:"9px"
 })
 Utils.insertCss(".rangeContainer span",{
  幅: "20px",
  高さ: "20px",
  境界半径:"50%",
  境界線:"1px 実線 #ccc",
  背景:"#fff",
  位置:"絶対",
  上:"0px",
  ボックスシャドウ:"2px 2px 2px #333"
 })
 Utils.insertCss(".leftBtn",{
  左:"0px"
 })
 Utils.insertCss(".rightBtn",{
  左:"238px"
 })
 }
}

Utils.js ファイル: ツールパッケージファイルです。

デフォルトクラス Utils をエクスポートする{
 静的createE(要素、スタイル、準備){
 要素 = document.createElement(要素);
 if(style) for(let prop in style) elem.style[prop]=style[prop];
 if(prep) for(let prop in prep) elem[prop]=prep[prop];
 要素を返します。
 }
 静的appendTo(要素、親){
 parent.constructor === String の場合、parent = document.querySelector(parent);
 親要素に子要素を追加します。
 }
 静的ランダム数(最小値,最大値){
 Math.floor(Math.random*(max-min)+min) を返します。
 }
 静的ランダムカラー(アルファ){
 アルファ=アルファ||Math.random().toFixed(1);
 isNaN(alpha)の場合、alpha=1;
 アルファ>1の場合、アルファ=1;
 アルファ<0の場合、アルファ=0;
 col="rgba("; とします。
 (i=0;i<3;i++) の場合{
  col+=Utils.randomNum(0,256)+",";
 }
 col+=alpha+")";
 列を返します。
 }
 静的挿入Css(選択、スタイル){
 document.styleSheets.length===0の場合{
  styleS = Utils.createE("style"); とします。
  Utils.appendTo(styleS,document.head);
 }
 styleSheet を document.styleSheets[document.styleSheets.length-1] とします。
 str=select+"{"とします。
 for(var prop in スタイル){
  str+=prop.replace(/[AZ]/g,function(item){
  "-"+item.toLocaleLowerCase() を返します。
  })+":"+styles[prop]+";";
 }
 str+="}"
 styleSheet.insertRule(str、styleSheet.cssRules.length);
 }
 静的 getIdElem(要素,obj){
 if(elem.id) obj[elem.id]=elem;
 if(elem.children.length===0) の場合、obj を返します。
 for(let i=0;i<elem.children.length;i++){
  Utils.getIdElem(elem.children[i],obj);
 }
 }
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: