vue-effort-slider チュートリアル：WebGL を使用した火炎の尾を持つ Vue 3 スライダーコンポーネント

これは何か

vue-effort-slider は、高度にカスタマイズ可能な Vue 3 スライダーコンポーネントで、最大の特徴はリアルタイムの WebGL による火炎の尾のエフェクトです。このエフェクトは Claude Code の effort slider からインスピレーションを得ています。スライダーが閾値（デフォルトでは最大値）に達すると、GPU による加速された火炎の尾が表示されます。また、スライダーが目盛りにスムーズに「吸着」するアニメーション、動的な配色、そしてランタイム依存性がゼロであることも特徴です。

簡単に言えば、通常の 0–100 のスライダーを、テクノロジー感あふれる外観の AI の「思考深さ」選択器に変えてくれるのです。

効果のプレビュー

最大値に引くときの火炎の尾の効果：

通常のドラッグ操作のリアルタイムデモ（アニメーション）：

コア機能

WebGL2 による火炎の尾：スライダーが閾値に達すると、GPU によるリアルタイムレンダリングの火炎効果が表示されます。
目盛りへの吸着アニメーション：cubic ease-out エフェクトで最も近い 25% の目盛りにスムーズに吸着します。
完全なテーマ設定：10 以上の色属性があり、スライダー、火炎の尾、トラック、ラベル、ハイライトなど、すべての視覚要素をカスタマイズできます。
v-model のサポート：標準的な Vue の双方向バインディング（modelValue）がサポートされています。
丸みを帯びたカット（Squircle）：カードとトラックは Apple スタイルの超楕円形のカットパスを使用しています。
レスポンシブ：幅はピクセル値または CSS 文字列（例：'100%'）を受け入れます。
ヘルプバブル：内蔵のヘルプアイコンと teleport tooltip があります。
軽量：ランタイム依存性がゼロで、Vue 3 のみが必要です。

インストール

npm install vue-effort-slider

すぐに始める

から始めるプロジェクトの作成

# 1. プロジェクトの作成
npm create vite@latest my-slider -- --template vue
cd my-slider
npm install vue-effort-slider

src/App.vue を編集します：

<script setup>
import { ref } from 'vue'
import { EffortSlider } from 'vue-effort-slider'
import 'vue-effort-slider/style.css'

const value = ref(75)
</script>

<template>
  <EffortSlider v-model="value" />
  <p style="color:#71717a;text-align:center;margin-top:16px">現在の値: {{ value }}</p>
</template>

# 2. 実行
npm run dev

http://localhost:5173 にアクセスすると、火炎の尾を持つスライダーが表示されます。

グローバル登録

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueEffortSlider from 'vue-effort-slider'
import 'vue-effort-slider/style.css'

const app = createApp(App)
app.use(VueEffortSlider)
app.mount('#app')

<template>
  <EffortSlider v-model="value" />
</template>

<script setup>
import { ref } from 'vue'
const value = ref(75)
</script>

ローカルでのインポート

<template>
  <EffortSlider v-model="value" label="思考深さ" />
</template>

<script setup>
import { ref } from 'vue'
import { EffortSlider } from 'vue-effort-slider'
import 'vue-effort-slider/style.css'

const value = ref(50)
</script>

子モジュールの必要に応じたインポート（Tree-shaking）

// 完全なコンポーネント
import { EffortSlider } from 'vue-effort-slider'
import 'vue-effort-slider/style.css'

// コンポーネントのみ
import { EffortSlider } from 'vue-effort-slider/EffortSlider'

// 単独のコンポーザブルをインポート
import { useSliderState } from 'vue-effort-slider/useSliderState'
import { useWebglFire } from 'vue-effort-slider/useWebglFire'

// コンポーザブルを一括でインポート
import { useSliderState, useWebglFire } from 'vue-effort-slider/composables'

// シェーダーのみ（GLSL ソース文字列）
import { VERT, FRAG_SIM, FRAG_BLUR, FRAG_COMP } from 'vue-effort-slider/shaders'

独立した火炎用の Canvas

useWebglFire を使用すると、任意の Canvas に火炎の尾の効果を追加できます：

<template>
  <canvas ref="canvasRef" width="400" height="60"
    style="width:400px;height:60px;border-radius:10px;background:#0c0c0c" />
</template>

<script setup>
import { ref } from 'vue'
import { useWebglFire } from 'vue-effort-slider/useWebglFire'

const canvasRef = ref(null)
const sliderValue = ref(100)
const isActive = ref(true)

useWebglFire(canvasRef, sliderValue, isActive, () => '#a857f7')
</script>

オンライン設定パネル

このコンポーネントにはオンライン設定パネル slider.qiyuan.icu が付属しており、各プロパティをリアルタイムで調整したり、火炎の尾の効果をプレビューしたり、生成されたコード（アニメーション）をワンクリックでコピーしたりできます：

すぐに設定を試したい場合は、slider.qiyuan.icu を開いてください。

プロパス

基本プロパス

プロパス	タイプ	デフォルト値	説明
`modelValue`	`Number`	`75`	現在の値。`v-model` がサポートされており、範囲は `0`–`100`
`width`	`String \| Number`	`376`	コンポーネントの幅。ピクセル数または CSS 文字列（例：`'100%'`）
`label`	`String`	`'Slider'`	トップのラベルテキスト
`threshold`	`Number`	WebGL の火炎効果を有効にする閾値。`100` に設定すると最大値のみで有効になります
`scaleLabels`	`String[]`	`['Faster', 'Smarter']`	トラックの両端の目盛りラベル
`statusLabels`	`Object`	`{ level1:'Minimal', level2:'Low', level3:'Medium', level4:'High', level5:'Max' }`	5つのレベルの状態テキスト
`background`	`String`	`'#000000'`	カードの背景色（任意の CSS 色）
`borderRadius`	`String \| Number`	カードの丸み（ピクセル）
`showHelp`	`Boolean`	ヘルプアイコンを表示するかどうか
`helpText`	`String`	`スライダーをドラッグして AI の思考深さを調整してください`	ヘルプアイコンをクリックしたときに表示されるテキスト

色関連のプロパス

すべての色プロパスは、任意の有効な CSS 色値（hex / rgb / hsl など）を受け入れます。

プロパス	タイプ	デフォルト値	説明
`labelColor`	`String`	`'#b0b0c7'`	トップのラベルテキストの色
`statusColor`	`String`	`'#a1a1aa'`	閾値に達していないときの状態テキストの色
`activeColor`	`String`	`'#c084fc'`	閾値に達したときの状態テキストの色（ハイライト付き）
`highlightColor`	`String`	`'#c084fc'`	閾値に達したときのスライダーのハイライト色
`scaleLabelColor`	`String`	`'#b0b0b8'`	端点のラベルの色
`helpIconColor`	`String`	`'#a1a1aa'`	ヘルプアイコンの色
`trailColor`	`String`	`'#a857f7'`	WebGL の火炎の尾の色
`thumbColor`	`String`	`'#ffffff'`	スライダーのハンドルの色
`trackColor`	`String`	`'#0c0c0c'`	トラックの背景色
`dotColor`	`String`	`'#494950'`	トラック上の装飾用の円点の色

イベント

イベント	コールバックパラメータ	説明
`update:modelValue`	`Number`	スライダーをドラッグする際に継続的にトリガーされ、`v-model` で使用されます
`change`	`Number`	スライダーのドラッグが終了し、吸着アニメーションが完了した後に一度トリガーされ、パラメータは最終的な吸着値です
`help`	—	ヘルプアイコンをクリックしたときにトリガーされます

vue-effort-slider チュートリアル：WebGLを使用した炎のドラッグテール効果のあるVue 3スライダーコンポーネント