UISlider

[ArenMook]

Overview

UISlider component can be used to create simple sliders and progress bars. It inherits all of the functionality from the UIProgressBar and adds an optional Thumb.



In its simplest form, all UISlider requires to function is a refrence to the Foreground widget to modify. The widget's starting dimensions will be the dimensions of the slider when it's at 100% (UISlider.value == 1.0). How the widget will shrink from there onwards depends on the Direction setting.

To create a very simple slider, just create a sliced sprite and give it a width of 200 with the height of 40. This will be the slider's background -- what the slider will look like when it's empty.

Next, add a child sliced sprite to it. This sprite should be what your slider should look like when it's full. You can inset it within the parent to make the parent seem to "envelop" it if you want to make it look look better.

Now that this is done, add a UISlider script to the first sprite (the background), and make it reference the second (foreground) sprite in the Foreground field. At this point you can hit Play and adjust the value of the slider, and the foreground sprite should react accordingly.

If you want the slider to be interactable, add a Box Collider to it. If you want it to be highlightable, add a UIButton to it and have it target either of the two sprites. Remember -- you can have more than one UIButton script on the same object, in case you wanted to color both sprites.

If you don't want to have a visible background, simply use a UIWidget for the Background instead.

You can specify a non-zero value in the Steps field to make the slider move in specific increments. A Step value of 5 would mean that the slider's possible values will be 0%, 25%, 50%, 75% and 100%.

You can also add a Thumb sprite that will follow the slider if you wish. The thumb object's position will be adjusted to always be on the edge of the slider. You can use it to attach highlighting effects or even a label that will follow the slider's bar as the slider's value changes.

For the OnValueChange field you can specify a function that will be called when the slider's value changes. The easiest way to see this in action is to add a UILabel, drag & drop the Label's game object into the Notify field and then choose the UILabel.SetCurrentPercent function from the drop-down list.

Pro-Tip

You can use UIStretch on the foreground to make it adjust its own size to match the parent so that it automatically adjusts its size when you resize the background.

Class Documentation

http://tasharen.com/ngui/docs/class_u_i_slider.html

If you have a question regarding this component or would like me to clarify something, just post a reply here.

[zipper]

It is sometimes useful to have threshold limits on the sliders.

I don't know if that adds too much clutter?

I was thinking:
Min Value
Max Value

under Value.

[ArenMook]

There is little point in that since you can always do something like this:

1. float myValue = Mathf.Lerp(-10f, 10f, slider.value);

[zipper]

What do you think about an isDragged property on the slider?

This is super useful for video players or other sliders that keep track of state -> you don't want to update the current thumb position when the movie is playing and the thumb is being dragged (scrubbed) for example.

Along the same lines, an UpdateDrag event would be perfect for video scrubbing. Usually you want to adjust the video playback while the thumb is being dragged, and not just at the end with the DragFinished event.

Best,
zipper

[ArenMook]

You can check UICamera.currentTouch (or UICamera.currentTouchID) to see if the event is caused by user interaction or not.

[nzen]

Is there a way to have overlapping sliders that move at the same time?

[ArenMook]

Not with stock NGUI. You'd need to code that behaviour.

[Chris_E]

I'm trying to use the "steps" property to have 40 steps (values will be 10-50) but for some reason when I set steps higher than 20 it seems to cap and reset the value to 20.  Why does this happen and is there a way around it?

[ArenMook]

If you need more than 20 steps, then don't use steps.

Clamp the actual value on your end instead.

1. Debug.Log(Mathf.RoundToInt(slider.value * 40f) / 40);

[Zyxil]

In 3.6.9

There seems to be a bug where the UISlider Thumb position will have a y value *-1 what it should be on first display.  If the control's y value is 50, the Thumb y will be -50.  If control y is -100, Thumb y will be 100.

It will be fixed in the next ForceUpdate() or value change.

You can easily see this by placing the Control - Simple Progress Bar prefab on a panel.  Make sure its y value is not zero and play the scene.



Bottom progress bar is the NGUI prefab. Top one is my customized one with UI2DSprites.  They both show the same behavior.

[ArenMook]

I don't quite follow... how do I reproduce it on my end, what are the exact steps? Sliders haven't changed in months. The only thing I can think of that may be related is you having the "static" flag active on the UIPanel and moving the content.

[Zyxil]

Ahh, I found it.  I have some custom logic that sets the scale of the panel to 0,0 on start and tweens it into existence.  When the slider is initialized, it can't calculate the thumb position correctly.

Apologies for the bug suspicion, all of the other controls I tested worked fine with this logic.

[ArenMook]

Scale of zero is invalid. You can't divide by zero. In the future use a small value instead like 0.01.

[Zyxil]

Ah, thanks for the clarification.  That make everything much cleaner.

[Andresfdezb]

Is it possible to create a slider using a widget instead of a sprite? I'm asking because I have a slider with "many children sprites inside the background" instead a just one background sprite. The idea is to hide the background sprite (the one with the UISlider script) and have the other compund sprite as a background.

I have tried a couple things but haven't been able to make it fully work. I have tried disabling the UISprite component (leaving the UISlider and the collider both enabled), but then I don't receive the drag functionality on the slider. Also setting the alpha of the background to 0 changes all the children sprites alpha to 0 too. I tried adding a widget and disabling the sprite, but I guess it only works with sprites.