ShapedSlider2D

The ShapedSlider2D node implements a slider that can also be used as a progress bar, based on the use of shapes.

• ShapedSlider2D can change to a progress bar by keeping it disabled and changing the values by script.

• ShapedRangeSlider2D inherits from RectBase2D.

Platform support

This element is fully supported on XR-Windows, XR-Portable Windows, XR-Portable iOS, XR-Portable Android, and XR-P WASM platforms.

ShapedSlider parts

The ShapedSlider2D node has four different parts; each is independently customizable and fulfills a different task.

• Background — This is the background of the whole slider, its dimension is related to the sliderBorder field.

  

• Bar — This is the filling part of the slider, from 0 to the slideValue field value and the selector. Depends on the direction field.

  

• Selector — The selector represents the slideValue and can be used to modify its value. Depends on the value of the pickCloserSelector field. If it's false, the user needs to click the selector to drag it, while if false the user can click any part of the slider to change the value.

  

• Foreground — This is a shape drawn on top of the whole sliderr. By default, value is set to none.

  

Directions

The ShapedSlider2D node supports four different directions for the filling of the bar. This allows it to be more flexible based on the need. The lowest and highest slide Value position on the slider depend on this field.

• Left to right

  

• Right to left

  

• Down to up

  

• Up to down

  

Customize the Shaped Slider aspects

The ShapedSlider2D node is highly customizable for various visual aspects. It is divided into four parts (background, bar, selector and foreground) that can be modified independently.

Shape

Each part can have its own shape. The shapes are completely independent and can be changed as needed; for example, round-rectangle background, circle bar, and custom-shape selector.

• Rectangle

  

• Round-rectangle

  

• Circle

  

• Custom-shape — This is related to the selectorShapeCustom field, which describes tension and points its shape.

  

Color

Each part can have its own color and border color.

Image

Instead of shapes, the slider also allows the use of images, with its related customization (each with its own mode and alignment).

Note: Does not support GIF files because they will now cycle and therefore will lose the animation.

Slider border

The slider contains a sliderBorder field, which sets a border between the slider part (background, bar, and foreground) and the actual Rect shape. This border does not affect the selector, which allows you to set a size for the selector that goes outside the slider part.

• Example of 10x10 border

• Example of 25x50 border

  

• Example of selector going outside the slider area

  

Slide mode

The slider allows two different slide modes:

• Fluid — The slideValue can have any value between 0 and valueScale field

• Step — The slideValue can only have selected values depending on the valueScale and stepCount fields.

For example, if the valueScale is 100 and the stepCount is 4, the value Scale is divided to have four intermediate steps between 0 and 100. Therefore, the slideValue can be only 0, 20, 40, 60, 80, or 100.

Fields

These are the fields for ShapedSlider2D node. Only the node-specific fields are indicated, fields obtained by inheritance are not.

Field inheritance: NodeBase > Rect2D > ShapedSlider2D