DemoSlider Widget

The DemoSlider prefab provides a slider widget which can be used to control a numeric value in your scene.

unity/../../../images/unity/Widget_DemoSlider.png

For a tutorial on customizing the DemoSlider, see Customizing the Slider Widget.

Slider Properies

The Slider widget is controlled by the SliderDemo script. These properties include:

  • Spring Coefficient — the slider button (the portion that you manipulate) depresses along the local z axis when you push it. The spring coefficient determines how fast the button pops back when released.
  • UpperLimit — the game object that sets the upper bound on the slider. The local x value of the transform of this object is used to calculate this bound. The object itself does not need to be visible, but it can be.
  • LowerLimit — the game object that sets the lower bound on the slider. The local x value of the transform of this object is used to calculate this bound. The object itself does not need to be visible, but it can be. The local x value of the lower limit must be smaller than the local x value of the upper limit object.
  • Active Bar — The game object that is stretched in the x axis from the lower limit (0) to the current value.
  • TopLayer — the frontmost of three layers of graphics for the slider button. As the button is pushed the top layer moves toward the bottom layer by a predetermined amount. After this point, the layers move together.
  • MidLayer — the middle layer.
  • BotLayer — the bottom layer. This layer also changes in color when pressed, which can make it much easier to see when the button is actually touched.
  • Dot — The game object that is cloned to make slider tick marks. By default, the dots are placed one unit above the slider in the local y direction. (Setting a local y value of -2 will place the dots 1 unit below the slider.)
  • Number of Dots — the number of tick marks. The distance between the slider lower and upper limits is divided by this value to determine the tick mark spacing.
  • Bot Layer Pressed Color — the color applied to the bottom layer graphics when the slider button is touched. The color is applied by setting the Unity Renderer.material.color property. If the graphic object does not have such a property, this property will not have any effect upon it.
  • Bot Layer Released Color — the normal color applied to the bottom layer graphics.
  • Dots On Color — the color applied to the tick marks between the lower lint and the current value of the slider.
  • Dots Off Color — the color applied to the tick marks above the current value of the slider.

In addition to these properties, the slider bar is a static component of the DemoSlider prefab. The slider bar is not resized automatically; if you move the upper or lower limit, you must also move and resize the slider bar to match.

Controlling a Property with the Slider

Use a data binding script to connect the slider to the property of another object. The slider value is clamped to the range [0..1]. To set a different range, scale and shift the slider value as necessary. In the following example, min and max properties are defined to allow you to set a different range.

using UnityEngine;
using LMWidgets;

public class SliderToFloatDataBinder : DataBinderSlider {
    public float outputValue = 0.0f;
    public float min = 0.0f;
    public float max = 1.0f;

    void Awake(){
        Mathf.Clamp (outputValue, min, max);
        base.Awake (); //required if using Awake!
    }

    override public float GetCurrentData() {
        return (outputValue - min)/(max - min);
    }

    override protected void setDataModel(float value) {
        outputValue = value * (max - min) + min;
    }
}

For convenience, this example defines the data model property itself (outputValue). Typically, though, you would use the property you wanted to control with the button directly.

After attaching the data binder script to an object in your scene, you must drag the Slider Top component from the DemoSlider instance in the scene to the Widgets property in the Inspector panel for your data binder script.

unity/../../../images/unity/Widget_AddToDataBinder.png