Skip to main content

 

 

 

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

Range Sliderのリファレンス

イベント

イベント名 説明 必須
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を作成します。

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

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

  • Was this article helpful?