jQueryで数値を「＋/−」で増減させるスピナーボタン

アピコです。

ECサイトでご要望の多い、数値を「＋/−」で増減させるスピナーボタンをご紹介。
カラーはサイトのトーン＆マナーを意識して変更してください。

新米なので、円の上に「＋」「ー」がうまくハマる方法がわからず、作業時間は1時間弱かかりましたが、見栄えも良いのでよしとしましょう！！

グラフィックデザインではこういったゲーム要素はないので、CSSってとっても楽しいですね。思ったように表示さできるとテンションが上がります♪

HTML

/* contentsの上に記述 */

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>


/* contents内の必要な位置に記述 */

<div class="spinner-container">
<span class="spinner-sub disabled">
<p class="spinner-p">-</p>
</span>
<input class="spinner" type="number" min="0" max="5" value="0">
<span class="spinner-add">
<p class="spinner-p1">+</p>
</span>
</div>


/* contentsの下に記述 */

<script>
$(function() {
  $('.spinner').each(function() {
    var el  = $(this);
    var add = $('.spinner-add');
    var sub = $('.spinner-sub');

    // substract
    el.parent().on('click', '.spinner-sub', function() {
      if (el.val() > parseInt(el.attr('min'))) {
        el.val(function(i, oldval) {
          return --oldval;
        });
      }
      // disabled
      if (el.val() == parseInt(el.attr('min'))) {
        el.prev(sub).addClass('disabled');
      }
      if (el.val() < parseInt(el.attr('max'))) {
        el.next(add).removeClass('disabled');
      }
    });

    // increment
    el.parent().on('click', '.spinner-add', function() {
      if (el.val() < parseInt(el.attr('max'))) {
        el.val(function(i, oldval) {
          return ++oldval;
        });
      }
      // disabled
      if (el.val() > parseInt(el.attr('min'))) {
        el.prev(sub).removeClass('disabled');
      }
      if (el.val() == parseInt(el.attr('max'))) {
        el.next(add).addClass('disabled');
      }
    });
  });
});
</script>

CSS

.spinner-container {
display: flex;
justify-content: center;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}

/* ボタンに挟まれた真ん中の数値 */

.spinner {
color: #3399ff;
font-size: 16px;
width: 50px;
padding: 0;
text-align: center;
border: 1px solid #B9B9B9;
border-radius: 5px;
background: none;
outline: none;
pointer-events: none;
margin: 0 5px;　　/* ボタンとの余白 */
}

.spinner::-webkit-inner-spin-button,
.spinner::-webkit-outer-spin-button {
-webkit-appearance: none;
}

/* ベースになる円 */

.spinner-sub,
.spinner-add {
position: relative;
background: #C30E18;
display: block;
width: 23px;
height: 23px;
text-align: center;
border-radius: 50%;
cursor: pointer;
line-height: 35px;
}

/* + -はテキスト */

.spinner-p {
display: block;
position: absolute;
top: -9px;　　/* 円の真ん中に設置するように調整 */
left: 5px;　　/* 円の真ん中に設置するように調整 */
font-size: 22px;
font-weight: 600;
color: #FFFFFF;
}

/* レスポンシブ調整 */

@media screen and (max-width: 730px) {
.spinner-p {
top: -7px;
}

}