Skip to main content

 

パターン

 

従来のWebアプリにのみ適用されます

 

OutSystems

Range Slider

構成された範囲内でハンドルをドラッグして値を設定します。

エンドユーザーが一定のオプション群から値を選択できるようにするコントロールUIを提供します。

使用方法

範囲スライダを画面に配置します。パターンのプロパティで、範囲の最小値と最大値を選択する必要があります。

  1. RangeSliderパターンをプレビューにドラッグします。

  2. 必須の値を設定する

入力パラメータ

入力名 説明 必須 デフォルト値
MinValue 使用可能な最小値を設定します。 Integer True なし
MaxValue 使用可能な最大値を設定します。 Integer True なし
InitialValue デフォルトで選択される値。最小値と最大値の間である必要があります。 Integer False 1
Step 各間隔の増分値。たとえば、Stepが5の場合、スライダーが0-5-10-15-20のようにジャンプします。デフォルト値は1。 Integer True なし
ShowPips Trueの場合、スライダーに近い範囲の値を表示します。デフォルト値はTrue。 Boolean False True
PipsStepsNumber 目盛りの間隔の数を設定します。ShowPipsがTrueの場合にのみ適用されます。 Integer False 0
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text False なし
AdvancedFormat 入力パラメータによって提供されるオプションのほかに、追加オプションを使用できます。使用できる追加オプションについては、noUiSliderライブラリをご覧ください。例: { pips: { density: 1 } } Text False "

イベント

イベント名 説明 必須
OnChange ハンドラがドラッグされて値が変更されるとトリガーされるイベント。 True

戻り値

SelectedValue: Integer

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
Handle .noUi-handle ハンドル要素です。このセレクタを使用して、カスタマイズします(:beforeおよび:afterも使用します)。
Interval .noUi-connect 色付きの間隔です。このセレクタを使用して、ゼロから選択した値までの間隔の色を変更します。

高度なユースケース

間隔の色を変更する

CSSエディタで以下のCSSを記述し、yourcolorを任意の色に変更します:

.range-slider .noUi-connect { background: yourcolor; }

または、CSS変数var(--color-yourcolor)を使用します。

.range-slider .noUi-connect { background: var(--color-red); }

ハンドラの||を削除する

  1. クラス.range-slider .noUi-handle:before, .range-slider .noUi-handle:afterを作成します。

  2. コンテンツをheight: 0pxに設定します。

  3. パブリッシュしてテストします。

  • Was this article helpful?