NEW ARTICLE
Rocky LinuxにおけるJournaldの詳細なログ管理
  1. HOME
  2. Alpine.js
  3. Alpine.jsを使って範囲入力可能なレンジスライダーを作成する

Alpine.jsを使って範囲入力可能なレンジスライダーを作成する

Alpine.jsを使って範囲入力可能なレンジスライダーを作成する

JavaScriptフレームワークの1つであるAlpine.jsを導入して、範囲入力可能なレンジスライダーを作成するサンプルコードを記述してます。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105
  • Alpine.js 2.7.3
windows10にApacheのインストール

Alpine.js導入

CDNから読み込んで利用します。

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>

レンジスライダーを作成

「x-show・x-model」ディレクティブを使用して、レンジスライダーを作成してます。
CSSにtailwindを使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>mebeeサンプル</title>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>
</head>

<body>
    <div class="container mx-auto my-56 w-2/5 p-6 text-center">

        <div x-data="{val:30}" class="max-w-screen-xl mx-auto">            
            
            範囲入力<br />
            <input class="w-full border" type="input" x-model="val" />
            スライダー</br>
            <input class="w-full" type="range" x-model="val" min="0" max="100" step="10">

        </div>

    </div>
</body>

</html>

実行結果を確認すると「レンジスライダー」が作成されていることが確認できます。