Swiperでピッカー（ドラムロール）を作成してみた

2024/02/12

ピッカー（ドラムロール）を実装する機会がある、JavaScriptライブラリを探しても見つからず。
フロント側で実装できないか検討した結果、スライダープラグインのSwiper（スワイパー）で作成してみました。

サンプルをご覧ください

スマホで操作した方が挙動が分かりやすいです。
勢いよくスライドした時は、スライドがコンテンツごとに止まらずに、縦にスーッと動作するように実装してみました。
今回はこちらの実装方法について解説します。

HTMLの記述

<div class="container">
	<div class="unit">体重</div>
	<div class="picker">
		<!-- 整数 -->
		<div class="swiper js-swiper">
			<div class="swiper-wrapper" id="integer"></div>
		</div>
		<!-- 点 -->
		<div class="swiper js-swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide">.</div>
			</div>
		</div>
		<!-- 小数 -->
		<div class="swiper js-swiper">
			<div class="swiper-wrapper" id="decimal"></div>
		</div>
	</div>
	<div class="unit">kg</div>
</div>

整数・点・小数でそれぞれスライダーを実装しますので、Swiperの記述が3つになります。
数字の部分はJavaScriptで出力するので、整数にはID→integer、小数にはID→decimalを割り振ります。

CSSの記述

.container{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin: 20px;
}
.unit{
	font-size: 20px;
	font-weight: bold;
}
.picker{
	position: relative;
	display: flex;
	justify-content: center;
	height: 240px;
}
.picker:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: calc(100% / 3);
	background: #f4f4f4;
	margin: auto;
}
.swiper{
	width: auto;
	margin: 0;
}
.swiper-slide{
	font-size: 60px;
	font-weight: bold;
	line-height: 1;
	text-align: right;
	color: #ccc;
	padding: 10px;
	box-sizing: border-box;
}
.swiper-slide-active{
	color: #000;
}

CSSは特に難しいことはしてません。
体重や単位をピッカーと横並びになるように、プロパティを指定しています。
最後にスライダーがアクティブの時は、分かりやすいように文字色を指定してます。

JavaScriptの記述

// 整数・点・小数をまとめてスライドする
var swiper = new Swiper(".js-swiper", {
	direction: 'vertical',
	slidesPerView: 3,
	centeredSlides: true,
	freeMode: {
	  enabled: true,
	  sticky: true,
	  minimumVelocity: 0.3,
    },
});

// 整数の数字を出力する
for (let i = 0; i <= 100; i++) {
	let integer = document.createElement("div");
	integer.classList.add("swiper-slide");
	integer.textContent = i;
	document.getElementById("integer").appendChild(integer);
}

// 小数の数字を出力する
for (let i = 0; i <= 9; i++) {
	let decimal = document.createElement("div");
	decimal.classList.add("swiper-slide");
	decimal.textContent = i;
	document.getElementById("decimal").appendChild(decimal);
}

整数・点・小数は、まとめてSwiperの指定をしています。
freeModeというオプションを利用することにより、スワイプ時のスムーズな動きを再現しています。
以下、オプションの詳細について説明します。