Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Range Slider Interval

単一の値または2つの値の間の範囲を選択します。

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

使用方法

Range Sliderパターンを画面に配置します。パターンのプロパティで、範囲の最小値と最大値を選択します。

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

  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
AdvancedFormat 入力パラメータによって提供されるオプションのほかに、追加オプションを使用できます。使用できる追加オプションについては、noUiSliderライブラリをご覧ください。例: { pips: { density: 1 } } Text False "

イベント

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

戻り値

  • SelectedMinValue: Integer
  • SelectedMaxValue: Integer

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
Lesser handle .noUi-handle-lower カスタマイズのときに使用する小さいハンドルです(:beforeおよび:afterも使用します)。
Upper Handle .noUi-handle-upper カスタマイズのときに使用する上のハンドルです(: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?