A Slider lets users select a floating-point value from a range of values. You can use a Slider to adjust a value, such as the volume of a sound or the brightness of a light. To set the value, you drag a thumb along a track, or click the track itself. A slider can also include a text input field, where you can modify the value directly.
Note: To align an element with other fields in an Inspector window, simply apply the .unity-base-field__aligned
USS class to it. For more information, refer to BaseField
.
You can create a Slider with UI Builder, UXML, or C#. The following C# example creates a Slider with a default value, low value, and high value, and sets the direction of the slider:
var slider = new Slider();
slider.value = 0.5f;
slider.lowValue = 0;
slider.highValue = 100;
slider.direction = SliderDirection.Horizontal;
The Slider control has a page-size property that controls how much the thumb moves, and how much the value changes, when you click the track to either side of the thumb.
If the page size value is 0, clicking the track moves the thumb to the cursor or pointer position, and updates the value accordingly.
If the page size value is greater than 0, clicking the track moves the thumb toward the cursor or pointer position by a specific amount. Slider controls treat page-size as a percentage of the total range.
For example, if the total range is 200, and the page size is 20, then the page size amount is 20% of 200, or 40. Each time you click the track, the thumb moves, and the value increases or decreases by 40.
The following UXML example creates a Slider:
[!code-xml[(External/Resources/editor_resources/Assets/Editor Default Resources/UIPackageResources/Snippets/UXML/SliderSnippet.uxml)]
The following C# example illustrates some of the customizable functionalities of the Slider:
[!code-cs[(Modules/UIElementsSamplesEditor/Snippets/SliderSnippet.cs#sample)]
To try this example live in Unity, go to Window > UI Toolkit > Samples.
C# クラス: Slider
名前空間: UnityEngine.UIElements
基本クラス: BaseSlider_1
この要素は基本クラスから以下の属性を継承します。
名前 | 型 | 説明 |
---|---|---|
binding-path |
string |
バインドされるべきターゲットプロパティのパス。 |
direction |
UIElements.SliderDirection |
スライダーの方向を格納する実際のプロパティ。 |
focusable |
boolean |
要素がフォーカス可能である場合は true。 |
high-value |
float |
スライダーがエンコードする最大値。 |
inverted |
boolean |
このスライダーが反転しているかどうかを示します。反転した横スライダーの場合、高い値が左、低い値が右に位置します。 反転した縦スライダーの場合、高い値が下、低い値が上に位置します。 |
label |
string |
フィールドの横に表示されるラベルを表す文字列。 |
low-value |
float |
スライダーがエンコードする最小値。 |
page-size |
float |
Represents the value that should be applied to the calculated scroll offset while scrolling the slider, such as when clicking within the track or clicking the slider arrows. |
show-input-field |
boolean |
スライダーコントロール内の任意のフィールドの可視性。 スライダー値を編集する別の方法を提供する数値テキストフィールドを表示するには、このプロパティを true に設定します。 |
tabindex |
int |
フォーカスリング内でフォーカス可能なものをソートするために使用される整数。0 以上であることが必要です。 |
value |
float |
スライダーの実際の値。 |
この要素は、VisualElement
から以下の属性も継承します。
名前 | 型 | 説明 |
---|---|---|
content-container |
string |
子要素はそれに追加されますが、通常は要素自体と同じです。 |
data-source |
Object |
Assigns a data source to this VisualElement which overrides any inherited data source. This data source is inherited by all children. |
data-source-path |
string |
Path from the data source to the value. |
name |
string |
この VisualElement の名前。 このプロパティを使用して、特定の要素を対象とする USS セレクターを記述します。要素には一意の名前を付けるのが標準的です。 |
picking-mode |
UIElements.PickingMode |
mouseEvents または IPanel.Pick クエリの間にこの要素を選択 (ピック) できるかどうかを決定します。 |
style |
string |
この要素のスタイルオブジェクトへの参照。 C# でこのオブジェクトに書き込まれた USS ファイルまたはインラインスタイルから計算されたデータが含まれます。 |
toolbar |
string |
ユーザーが要素をマウスオーバーした後、わずかな時間、情報ボックス内に表示するテキスト。これはエディター UI でのみサポートされます。 |
usage-hints |
UIElements.UsageHints |
VisualElement の高レベルの使用パターンを指定するヒント値の組み合わせ。このプロパティは、VisualElement がまだ Panel の一部でない場合にのみ設定できます。Panel の一部になると、このプロパティは事実上読み取り専用となり、変更しようとすると例外がスローされます。適切な UsageHints を指定することで、予想される使用パターンに基づいて、特定の操作をどのように処理するか、または高速化するかについて、システムがより適切な判断を下すようになります。これらのヒントは動作や視覚的な結果には影響しませんが、パネルとその中の要素の全体的なパフォーマンスにのみ影響することに注意してください。常に適切なUsageHints を指定することを考慮することをお勧めしますが、特定の条件下 (例えば、ターゲットプラットフォームのハードウェア制限など) では、いくつかの UsageHints が内部的に無視される可能性があることに留意してください。 |
view-data-key |
string |
Used for view data persistence, such as tree expanded states, scroll position, or zoom level. This key is used to save and load the view data from the view data store. If you don’t set this key, the persistence is disabled for the associated VisualElement . For more information, refer to View data persistence. |
以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。
C# プロパティ | USS セレクター | 説明 |
---|---|---|
ussClassName |
.unity-slider |
この型の要素の USS クラス名。 |
labelUssClassName |
.unity-slider__label |
この型の要素のラベルの USS クラス名。 |
inputUssClassName |
.unity-slider__input |
この型の要素の入力要素の USS クラス名。 |
ussClassName |
.unity-base-slider |
この型の要素の USS クラス名。 |
labelUssClassName |
.unity-base-slider__label |
この型の要素のラベルの USS クラス名。 |
inputUssClassName |
.unity-base-slider__input |
この型の要素の入力要素の USS クラス名。 |
horizontalVariantUssClassName |
.unity-base-slider--horizontal |
この型の要素の (横方向に表示される場合の) USS クラス名。 |
verticalVariantUssClassName |
.unity-base-slider--vertical |
この型の要素の (縦方向に表示される場合の) USS クラス名。 |
dragContainerUssClassName |
.unity-base-slider__drag-container |
この型の要素のコンテナ要素の USS クラス名。 |
trackerUssClassName |
.unity-base-slider__tracker |
この型の要素のトラッカー要素の USS クラス名。 |
draggerUssClassName |
.unity-base-slider__dragger |
この型の要素のドラッガー要素の USS クラス名。 |
draggerBorderUssClassName |
.unity-base-slider__dragger-border |
この型の要素のドラッガー境界要素の USS クラス名。 |
ussClassName |
.unity-base-field |
この型の要素の USS クラス名。 |
labelUssClassName |
.unity-base-field__label |
この型の要素のラベルの USS クラス名。 |
inputUssClassName |
.unity-base-field__input |
この型の要素の入力要素の USS クラス名。 |
noLabelVariantUssClassName |
.unity-base-field--no-label |
ラベルがない場合の、この型の要素の USS クラス名。 |
labelDraggerVariantUssClassName |
.unity-base-field__label--with-dragger |
この型の要素にドラッガーがアタッチされている場合のラベルの USS クラス名。 |
mixedValueLabelUssClassName |
.unity-base-field__label--mixed-value |
混合値を示す要素の USS クラス名 |
alignedFieldUssClassName |
.unity-base-field__aligned |
インスペクター要素で整列される要素の USS クラス名 |
disabledUssClassName |
.unity-disabled |
ローカルで無効にされた要素の USS クラス名。 |
また、Inspector や UI Toolkit Debugger の Matching Selectors セクション を使用して、どの USS セレクターが VisualElement
のコンポーネントに影響するかを、階層のすべてのレベルで確認することもできます。