Clear
Back

Adding the Native UI Slider

Add the native UI slider to your Spark AR Studio effect to let people gradually control something in the scene, for example transparency or color.

To see a complete example project with the native UI slider, download the sample content. The script that's used in the example project is included in this guide. In the finished effect, adjusting the slider on the device screen changes the transparency of a material with an emoji texture applied to it:



It's a good idea to take a look at our guides to scripting if it's something you're new to.

Add the capability

The Slider capability needs to added to your project. To do this:

  1. Go to Project in the menu bar.
  2. Select Capabilities.
  3. Click +.
  4. Search for Native UI Control and click Insert.


Native UI Control will now be listed as a Capability. Next add the Slider capability. To do this:

  1. Click the arrow to the left of Native UI Control to reveal a list of options underneath it.
  2. Check the box next to Slider.

Not all capabilities are added to projects automatically. If you need other capabilities you may need to add them manually.

The script

First create a new script, and open it.

Include the NativeUI and Textures modules:

const NativeUI = require('NativeUI');

Create a variable to store the value of the native slider:

var lastSliderValue = 0.5;

Create a reference to the picker:

const slider = NativeUI.slider;

Set up the monitor for the value of the slider.

The val is the slider value that will be returned by the monitor, and will be a value between 0 and 1.

slider.value.monitor({fireOnInitialValue: false}).subscribe(function(val) {
    lastSliderValue = val.newValue;
    // Choose your desired slider value
  });

Set the initial value of the slider:

NUI.slider.value = lastSliderValue;

Make the slider visible:

NUI.slider.visible = true;

Example

The example below shows you how to use the slider to set the opacity of a particular material, like in the example project.

This example also highlights how you can set the initial value of the slider along with the capability of making the slider visible.

const NUI = require("NativeUI");
const M = require('Materials');
const Time = require('Time');

// Slider
var lastSliderValue = 0.5;
const mat = M.get('angery_mat');
const nativeUISlider = NativeUI.slider;

nativeUISlider.value.monitor({fireOnInitialValue: false}).subscribe(function(val) {
    lastSliderValue = val.newValue;
    
    let sliderData = { 'sliderVal': lastSliderValue };

    mat.opacity = lastSliderValue;
  });
  
  function configureSlider(){
      nativeUISlider.value = lastSliderValue;
  }
  
  function init()
  {
    configureSlider();
    nativeUISlider.visible = true;
  }
  
  init();

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.


Read FAQs
Was this document helpful?