Range Slider

rangeslider.jsライブラリとの統合を提供し、HTML5のrange入力要素を美しくカスタマイズ可能なスライダーインターフェースに強化します。

range_slider
1,040 sites
22
drupal.org
field api
form element field widget slider range input user interface numeric input webform rangeslider.js javascript
Drupal 8 Drupal 9 Drupal 10

インストール

Drupal 10, 9 v2.1.0
composer require 'drupal/range_slider:^2.1'
Drupal 8 v8.x-1.5
composer require 'drupal/range_slider:8.x-1.5'

概要

Range Sliderモジュールは、人気のあるrangeslider.js JavaScriptライブラリとのDrupal統合を提供します。HTML5のrange入力要素を、より良い視覚的フィードバックとユーザーエクスペリエンスを提供する強化されたスライダーインターフェースでラップします。

このモジュールは、integer、decimal、floatフィールドタイプで使用できるフィールドウィジェットと、開発者がカスタムフォームで使用できるフォーム要素APIの両方を提供します。水平および垂直の方向をサポートし、オプションでスライダーに対する様々な位置に現在の値を表示できます。

Webformモジュールを使用しているサイトでは、Range Sliderは任意のwebformに追加できるwebform要素も提供し、フォームビルダーが直感的なスライダーインターフェースを使用して数値を収集できるようにします。

Features

  • 標準の数値入力の代わりに視覚的なレンジスライダーをレンダリングする、integer、decimal、floatフィールドタイプ用のフィールドウィジェット
  • カスタムフォームやモジュールで使用するためのカスタムフォーム要素（#type => 'range_slider'）
  • 水平および垂直スライダー方向のサポート
  • スライダーの下、上、左、右に配置可能なオプションの値出力表示
  • 表示値用のカスタマイズ可能な接頭辞と接尾辞（例：'$50 USD'）
  • webformビルダー向けのレンジスライダー要素を提供するWebform統合
  • モダンブラウザ互換性のためにCDN（jsDelivr）から読み込まれるrangeslider.jsライブラリを使用
  • フィールド設定からの最小値と最大値の設定を尊重
  • AJAX対応のフォーム要素処理
  • 適切なレイアウト統合のためのマージンスペーシングを備えたクリーンで最小限のCSS

Use Cases

商品数量の選択

ECサイトの商品ページでRange Sliderを使用して、顧客が数量を選択できるようにします。適切な最小/最大値を設定し、明確なフィードバックのためにスライダーの上または下に現在の値を表示します。

評価または満足度調査

ユーザーがスライドして数値スケールで同意度や満足度を示す、満足度スケールや評価システムを実装します。

価格帯フィルタリング

Viewsの露出フィルタやカスタム検索フォームで価格帯セレクターを作成し、ユーザーが視覚的に予算範囲を選択できるようにします。

ボリュームまたは強度コントロール

ボリュームコントロール、強度設定、または垂直スライダーの比喩が有効なインターフェースに垂直方向のスライダーを使用します。

寄付金額の選択

寄付者がスライダーを使用して寄付金額を選択できるようにし、接頭辞と接尾辞オプションで通貨記号と単位を表示します（例：'$50 USD'）。

Webformでの数値入力

Webformを使用しているサイトでは、年齢範囲、数量の好み、数値評価などの数値データを収集するフォームにレンジスライダー要素を追加します。

Tips

  • フィールドの最小値と最大値が尊重されます - スライダーの範囲を制限するにはフィールド設定でこれらを設定してください
  • ユーザーがスライダーをドラッグする際のリアルタイム値フィードバックを表示するには'output'設定を使用します
  • 価格や通貨入力には、#output__field_prefixと#output__field_suffixを使用して通貨記号を追加します
  • 垂直スライダーはボリュームコントロールや水平スペースが限られている場合に適しています
  • スライダーはAJAX対応フォームに自動的にアタッチされ、AJAXリフレッシュ後に再初期化されます
  • フォーム要素APIを使用する場合、コアのRange要素からのすべてのプロパティが継承されます（増分値用の#stepなど）

Technical Details

Hooks 1
hook_help

hook_help()を実装して、モジュールのヘルプページにREADME.mdの内容を表示します。Markdownモジュールがインストールされている場合、READMEはフォーマットされたHTMLとしてレンダリングされ、そうでない場合はプレフォーマットテキストとして表示されます。