← 動的パーツギャラリーへ戻る

パーツ番号 05-02-04 ・ JavaScript使用

スライダー料金シミュレータ

スライダーで人数を動かすと料金がリアルタイム計算。WordPressの見積もりページや料金体験に。

js

プレビュー

ソースコード

HTML

<div class="d05-02-04-wrap">
          <div class="d05-02-04-head">チーム人数で料金を試算</div>
          <div class="d05-02-04-users"><b id="d05-02-04-uc">5</b> 人</div>
          <input type="range" min="1" max="50" value="5" class="d05-02-04-range" id="d05-02-04-rg">
          <div class="d05-02-04-result">
            <div class="d05-02-04-row"><span>基本料金</span><b>¥5,000</b></div>
            <div class="d05-02-04-row"><span>1人あたり ¥800 ×<i id="d05-02-04-un">5</i></span><b id="d05-02-04-us">¥4,000</b></div>
            <div class="d05-02-04-total"><span>月額合計</span><b id="d05-02-04-tt">¥9,000</b></div>
          </div>
        </div>

CSS

.d05-02-04-wrap{width:100%;max-width:260px}
        .d05-02-04-head{font-size:12px;font-weight:700;color:#374151;text-align:center;margin-bottom:8px}
        .d05-02-04-users{text-align:center;font-size:12px;color:#6b7280;margin-bottom:8px}
        .d05-02-04-users b{font-size:22px;color:#6366f1}
        .d05-02-04-range{width:100%;accent-color:#6366f1;margin-bottom:14px}
        .d05-02-04-result{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:12px;font-size:11px}
        .d05-02-04-row{display:flex;justify-content:space-between;color:#6b7280;padding:4px 0}
        .d05-02-04-total{display:flex;justify-content:space-between;border-top:1px solid #e5e7eb;margin-top:6px;padding-top:8px;font-weight:800;color:#374151}
        .d05-02-04-total b{color:#6366f1;font-size:14px}

JavaScript

(function(){
        var root=document.getElementById('item-05-02-04');
        var rg=root.querySelector('#d05-02-04-rg');
        function yen(n){return '¥'+Number(n).toLocaleString('ja-JP');}
        function calc(){
          var n=+rg.value,per=800,base=5000,sub=per*n,total=base+sub;
          root.querySelector('#d05-02-04-uc').textContent=n;
          root.querySelector('#d05-02-04-un').textContent=n;
          root.querySelector('#d05-02-04-us').textContent=yen(sub);
          root.querySelector('#d05-02-04-tt').textContent=yen(total);
        }
        rg.addEventListener('input',calc);calc();
      })();

クラス名 .d05-02-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。