Slider2D
- Last UpdatedFeb 19, 2025
- 5 minute read
The Slider2D node implements a slider that can also be used as a progress bar.
-
Change to a progress bar by keeping it disabled and changing the values by script.
-
Slider2D inherits from RectBase2D.
Platform support
This node is fully supported on XR-Windows, XR-Portable Windows, XR-Portable iOS, XR-Portable Android, and XR-Portable WASM platforms.
|
XR-WIN |
XR-P-WIN |
XR-P-IOS |
XR-P-AND |
XR-P-WASM |
|---|---|---|---|---|
|
Full support |
Full support |
Full support |
Full support |
Full support |
|
|
|
|
|
|
Building slidebar aspect
All the images used inside the Slider2D are stretched according to node size and image usage. The slide bar is built using four different layers.
|
Layer |
Description |
|---|---|
|
imageSelector (optional) |
This element is drawn over the slider at current position. |
|
imageForeground (optional) |
This element draws a frame over the slider. |
|
imageBar or colorBar (alternative) |
If imageBar is defined, this element is stretched from left border to current value position. If the imageBar is not set, the slider is filled with colorBar from left border to current value position. |
|
imageBackground or colorBackground |
If imageBackground is set, this image is used as base layer. If imageBackground is not set, the slider background is colored with colorBackground. |
Borders and selector
-
When using the imageSelector, it is necessary to add a border to avoid the selector image being cut off when moving left and right.
-
You can use Vertical border to restrict the vertical size of bar compared to selector.
User interaction
The user can interact the mouse with the slider in two ways:
-
Press in a specific point to instantly set the slider value.
-
Press the imageSelector or on the current slider value position and drag to change values smoothly.
Code example
This is a code example for the Slider2D node.
<Slider2D name="aSlider" templateInfo="Slider2D|aSlider" position="10 10" size="200 40" visible="true" imageBackground="bubble_01.png" imageBar="back.png" value="0" colorBar="0.7529412 0.3137255 0.3019608 1" colorSelector="0.572549 0.8156863 0.3137255 1" borderSize="20 0"/>
Image color filter modes
The following options define the strategy to use when applying a color filter to an image:
-
none—The selected color is not applied to the images.
-
screen—The selected color is added to the image. This makes the image brighter and has more effect on dark colors. Black color is colored, light colors will tend to white, and white color stays white (since it is already the lightest color possible). This mode is suited to color black or dark glyphs by a selected color.
-
multiply—The image colors are multiplied by the selected color. This makes the images darker and has more effect on light colors. White color is colored, dark colors will tend to black, and black color stays black (since it is already the darkest color possible). This mode is suited to color white or light glyphs by a selected color.
-
overlay—Applies both screen and multiply strategies to the image by the selected color. This keeps the image brightness almost the same, has a balanced influence on light and dark colors, and allows to color both black and white.
-
invert—Inverts the color of the displayed image. The selected color is not used in this mode.
Slider2D fields
These are the fields for Slider2D node. Only the node-specific fields are indicated, not fields obtained by inheritance.
Field inheritance: NodeBase > RectBase2D > Slider2D
|
Fields |
Type |
Use |
Default value |
Description |
|---|---|---|---|---|
|
borderSize |
svec2 |
Optional |
0 0 |
Used to reduce the sliderbar coverage to narrow the bar and to avoid imageSelector to be cut. |
|
colorBar |
svec4 |
Optional |
1 1 1 1 |
Sets the slider background color. |
|
colorBar |
svec4 |
Optional |
0 0 0 1 |
Sets the value bar color. |
|
direction |
senum |
Optional |
Horizontal |
Specifies slider direction as Horizontal or Vertical. |
|
enabled |
sbool |
Optional |
true |
Switches on and off user interaction. |
|
imageBackground |
sstring |
Optional |
Sets the image to be used as slider background. |
|
|
imageBackgroundColorFilter |
svec4 |
Optional |
0, 31, 94 |
A solid color that is blended on the displayed imageBackground, supports alpha channel. For more information about different blend strategies, see Image color filter modes. |
|
imageBackgroundColorFilterMode |
senum |
Optional |
Defines the strategy used to blend the color selected in imageBackgroundColorFilter on the displayed imageBackground. The following options are available: none, screen, multiply, color, invert. See Image color filter modes section for details. |
|
|
imageBar |
sstring |
Optional |
Sets the image to be stretched to represent slider value. |
|
|
imageBarColorFilter |
svec4 |
Optional |
0, 175, 239 |
A solid color that is blended on the displayed imageBar, supports alpha channel. For more information about different blend strategies, see Image color filter modes. |
|
imageBarColorFilterMode |
senum |
Optional |
Defines the strategy used to blend the color selected in imageBarColorFilter on the displayed imageBar. The following options are available: none, screen, multiply, color, invert. See Image color filter modes section for details. |
|
|
imageForeground |
sstring |
Optional |
Sets the image to be used as slider frame. |
|
|
imageForegroundColorFilter |
svec4 |
Optional |
127, 127, 127 |
A solid color that is blended on the displayed imageForeground, supports alpha channel. For more information about different blend strategies, see Image color filter modes. |
|
imageForegroundColorFilterMode |
senum |
Optional |
Defines the strategy used to blend the color selected in imageForegroundColorFilter on the displayed imageForeground. The following options are available: none, screen, multiply, color, invert. See Image color filter modes section for details. |
|
|
imageSelector |
sstring |
Optional |
Sets the image to place at current value position as selector. |
|
|
imageSelectorColorFilter |
svec4 |
Optional |
0, 175, 79 |
A solid color that is blended on the displayed imageSelector, supports alpha channel. For more information about different blend strategies, see Image color filter modes. |
|
imageSelectorColorFilterMode |
senum |
Optional |
Defines the strategy used to blend the color selected in imageSelectorColorFilter on the displayed imageSelector. The following options are available: none, screen, multiply, color, invert. See Image color filter modes section for details. |
|
|
value |
sfloat |
Optional |
50 |
Slider value. |
|
valueScale |
sfloat |
Optional |
100 |
Limit value. |