Slider

ドラッグ操作で値を選択できるレンジスライダーコンポーネントです。音量や価格範囲の選択に使用します。

Basic

jui-slider の最も基本的な使用例です。

Colors

color プロパティでスライダーの色を変更できます。

Sizes

size プロパティでスライダーのサイズを変更できます。

Ticks

marks プロパティで目盛りマークを表示できます。

Steps

step プロパティで変化量を指定できます。

Disabled

disabled で操作不可にできます。

アクセシビリティ

• WAI-ARIA:
  • つまみ要素に role="slider" を設定します。
  • aria-valuenow、aria-valuemin、aria-valuemax で現在値と範囲を通知します。
  • aria-orientation="horizontal" で方向を明示します。
  • label プロパティで aria-label を設定できます。
• キーボードナビゲーション:
  • ← / ↓: 値を1ステップ減少
  • → / ↑: 値を1ステップ増加
  • Home: 最小値に設定
  • End: 最大値に設定

CSS カスタムプロパティ

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークン（--jui-color-brand, --jui-color-danger, --jui-color-success, --jui-color-warning, --jui-radius-full 等）を参照して描画されます。

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
Pointer Events	ドラッグ操作の処理	55+	59+	13+	Baseline 2020
CSS Transitions	アニメーション効果	26+	16+	9+	Baseline 2014
CSS 変数 (var())	デザイントークン・カラー適用	49+	31+	9.1+	Baseline 2017

💡 いずれの機能も主要ブラウザで広く対応済みです。

関連コンポーネント

• Input — テキスト入力コンポーネント
• Progress — 進捗状況の表示
• Form Field — フォームフィールドラッパー

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
color	color	カラーバリアント	"brand" | "danger" | "success" | "warning"	'brand'
disabled	disabled	無効状態	boolean	false
label	label	アクセシビリティラベル	string	''
marks	marks	目盛りマーク（JSON文字列または配列）	SliderMark[] | string	'[]'
max	max	最大値	number	100
min	min	最小値	number	0
name	name	フォーム識別用の name 属性	string	undefined
showValue	show-value	現在値ラベル表示	boolean	false
size	size	サイズバリアント	"lg" | "md" | "sm"	'md'
sliderLabel	slider-label	値フォーマットラベル（例: ‘{value}%‘）	string	''
step	step	ステップ幅	number	1
value	value	現在値	number	0

イベント

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
juiChange	ドラッグ完了時の最終値	CustomEvent<{ value: number; }>
juiInput	ドラッグ中のリアルタイム値変更	CustomEvent<{ value: number; }>

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
"fill"	フィル（進捗部分）
"mark"	目盛りマーク
"thumb"	つまみ（ドラッグハンドル）
"track"	スライダートラック
"value-label"	値ラベル

---

Built with StencilJS