Last reviewed 31 Jul 2026
Applies to
Banter VR JavaScript SDK In-world UI UI events
Difficulty Intermediate

Build a Slider and Toggle Panel in Banter

The Banter UI system provides sliders, toggles, labels, layout containers, style properties, and change events. This example displays the most recent control values in a world-space status label.

Settings Panel Workflow

Create the world-space panel and status label, then append a slider and toggle with OnChange handlers.

  1. Add BanterUIPanel to a positioned GameObject.
  2. Append a label, UISlider, and UIToggle.
  3. Read each event's value and update the label.

Create the Panel

const panelObject = new BS.GameObject({
  name: "SettingsPanel",
  localPosition: new BS.Vector3(0, 1.7, 3)
});

const panel = panelObject.AddComponent(
  new BS.BanterUIPanel({
    resolution: new BS.Vector2(800, 600),
    screenSpace: false,
    enableHaptics: true,
    clickHaptic: new BS.Vector2(0.1, 0.05),
    enterHaptic: new BS.Vector2(0.05, 0.02),
    exitHaptic: new BS.Vector2(0.05, 0.02),
    enableSounds: false
  })
);

Add a Layout Container

UIVisualElement is the documented generic layout container:

const controls = new BS.UIVisualElement();
controls.style.flexDirection = "row";
controls.style.justifyContent = "space-between";
controls.style.padding = "10px";
panel.root.AppendChild(controls);

All Banter UI elements inherit hierarchy methods including AppendChild(), RemoveChild(), and InsertBefore().

Add the Status Label

const status = new BS.UILabel();
status.SetProperty(
  BS.PN.text,
  "Move a control"
);
status.style.fontSize = "24px";
status.style.color = "#FFFFFF";
panel.root.AppendChild(status);

Add the Slider

const slider = new BS.UISlider();
slider.style.width = "200px";

slider.OnChange((event) => {
  status.SetProperty(
    BS.PN.text,
    `Slider: ${event.value}`
  );
});

controls.AppendChild(slider);

The slider's documented OnChange event exposes its current value through event.value.

Add the Toggle

const toggle = new BS.UIToggle();

toggle.OnChange((event) => {
  status.SetProperty(
    BS.PN.text,
    `Enabled: ${event.value}`
  );
});

controls.AppendChild(toggle);

The toggle uses the same event.value pattern.

Apply Multiple Styles

Every UI element inherits SetStyles():

controls.SetStyles({
  backgroundColor: "#182235",
  padding: "10px",
  borderRadius: "5px"
});

The official style reference includes layout, size, position, spacing, borders, backgrounds, text, display, transform, cursor, and transition properties.

Common Questions

Where is the current Banter slider value?

Read event.value inside the slider's OnChange() handler, as shown in the official UISlider example.

Why do my Banter controls not appear inside the row?

Append the slider and toggle to the UIVisualElement container, then append that container to panel.root.

Official References

Related Navigation