Tasharen Entertainment Forum

Support => NGUI 3 Documentation => Topic started by: ArenMook on November 21, 2013, 02:07:32 AM

Title: UISlider
Post by: ArenMook on November 21, 2013, 02:07:32 AM

Overview

UISlider component can be used to create simple sliders and progress bars. It inherits all of the functionality from the UIProgressBar (http://www.tasharen.com/forum/index.php?topic=6738) and adds an optional Thumb.

(http://www.tasharen.com/ngui/uislider.jpg)

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 (http://www.tasharen.com/forum/index.php?topic=6704) 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 (http://www.tasharen.com/forum/index.php?topic=6708) 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 (http://www.tasharen.com/forum/index.php?topic=6702) 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 (http://www.tasharen.com/forum/index.php?topic=6706), 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 (http://www.tasharen.com/forum/index.php?topic=6713) 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.

Title: Re: UISlider
Post by: zipper on November 28, 2013, 11:56:05 PM

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.

Title: Re: UISlider
Post by: ArenMook on November 29, 2013, 10:39:06 AM

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

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

Title: Re: UISlider
Post by: zipper on December 01, 2013, 03:30:44 AM

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

Title: Re: UISlider
Post by: ArenMook on December 01, 2013, 10:00:54 AM

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

Title: Re: UISlider
Post by: nzen on April 02, 2014, 07:53:15 AM

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

(http://i.imgur.com/ZnFsYX0.png)

Title: Re: UISlider
Post by: ArenMook on April 03, 2014, 09:57:44 PM

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

Title: Re: UISlider
Post by: Chris_E on June 30, 2014, 02:05:24 PM

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?

Title: Re: UISlider
Post by: ArenMook on July 01, 2014, 05:04:10 AM

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);

Title: Re: UISlider
Post by: Zyxil on August 13, 2014, 10:22:18 PM

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.

(http://i.imgur.com/akFRp19.png)

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

Title: Re: UISlider
Post by: ArenMook on August 14, 2014, 08:18:33 AM

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.

Title: Re: UISlider
Post by: Zyxil on August 14, 2014, 08:12:24 PM

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.

Title: Re: UISlider
Post by: ArenMook on August 15, 2014, 08:14:45 AM

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

Title: Re: UISlider
Post by: Zyxil on August 16, 2014, 09:33:31 AM

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

Title: Re: UISlider
Post by: Andresfdezb on November 12, 2014, 05:10:30 AM

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.

Title: Re: UISlider
Post by: ArenMook on November 12, 2014, 07:59:57 AM

UIWidget (UISlider, collider)
- UISprite foreground
- UISprite background

That's the typical setup. You can use any widget for the foreground/background, not just a sprite. In Windward I used labels for example -- labels set to use dots as text (.............).

Title: Re: UISlider
Post by: Andresfdezb on November 13, 2014, 06:45:23 AM

Quote from: ArenMook on November 12, 2014, 07:59:57 AM

UIWidget (UISlider, collider)
- UISprite foreground
- UISprite background

That's the typical setup. You can use any widget for the foreground/background, not just a sprite. In Windward I used labels for example -- labels set to use dots as text (.............).

Ok, my setup was different:

UISprite background (UIslider, collider)
- UIWidget (compound background)
- UISprite foreground

I'll give it a try. Thanks for the response!  :D

Title: Re: UISlider - not showing value linearly.
Post by: TokyoDan on November 21, 2014, 10:18:18 PM

When I slide the thumb control to the right the bar doesn't update linearly. It fills to the right faster than the right-ward movement of the thumb. Also I can't move the thumb to the rightmost or leftmost edge of the slider. This happens on Retina iPad and iMac builds but not in the editor. It is more pronounced on Retina devices. What could be causing this?

Title: Re: UISlider
Post by: ArenMook on November 22, 2014, 01:34:54 PM

Create a widget - ALT+SHIFT+W and change its pivot to top-left.
Add a collider to it - ALT+SHIFT+C.
Add a UISlider to it.
Add anything you like below it.

Title: Re: UISlider
Post by: TokyoDan on November 22, 2014, 03:56:35 PM

Thanks. But I am not asking how to make a UISlider. I know how to make a UISlider and that is what I did. I am asking why it acts funny as I explained.

Title: Re: UISlider
Post by: ArenMook on November 25, 2014, 01:47:19 AM

Hmm. I see no reason for that. How can I reproduce it on my end using the sliders that come with NGUI?

Title: Re: UISlider
Post by: TokyoDan on November 25, 2014, 01:54:28 AM

I just made a slider. and that is what happens. Then I redid it using your clean sample in your previous post with all the default settings and it still happens. The only way I can really show you is to send you my project and tell you where the sliders are defined. Then you build for a Mac and a Retina iPad, run it on device, then you should see it. It doesn't happen in the editor. That's what confuses me.

Title: Re: UISlider
Post by: ArenMook on November 25, 2014, 02:18:41 AM

What version of NGUI? Retina iPad has a very high resolution. You can fake it in the editor by using a constrained UIRoot with a high resolution.

Title: Re: UISlider
Post by: TokyoDan on November 25, 2014, 02:42:23 AM

3.7.5

In my scene on the same hierarchical level I got two UIRoots ("GameMessages Root" and "Sound UI Root" ) and one NGUI Camera.

"Sound UI Root" is the place that has the problem sliders. Both UIRoots are set like this:
Constrained OnMobiles
Current Width: 1280: Fit: unchecked
Current Height: 480; Fit: checked

The actual size of the game is 525 x 700.

Title: Re: UISlider
Post by: RafiMagsi on November 26, 2014, 05:48:18 AM

Regarding UISlider, How I can use images in background, foreground and thumb ? So I can make the custom style.

Title: Re: UISlider
Post by: ArenMook on November 26, 2014, 09:08:22 PM

@TokyoDan: First update to 376. Second, change your game view to use even dimensions. 525 doesn't divide by two cleanly. Last, I don't get your dimensions... 1280x480 is very different from 525x700, and not just in size but in aspect ratio. What are you trying to do?

@RafiMagsi: I don't understand your question. If you're asking about using UITexture, then I see no issue with it. Just do that. Progress bars work with widgets.

Title: Re: UISlider
Post by: TokyoDan on November 27, 2014, 04:03:56 AM

525x700 is the actual size of the game in Mac & web builds.

For iOS builds the UIRoot is set to 1280x480 for that ResolutionSwitchController (from way back) and has nothing to do with the actual size of the game which already successfully fills the Retina and non-Retina iPads in portrait orientation. The 1280 x 480 (480 for Portrait orientation) determines where the hires (Retina) normal-res (non-Retina) cutoff is so the the proper hires/normal-res fonts will be swapped in/out. This keeps the fonts crisp on both Retina and non-Retina devices.

Title: Re: UISlider
Post by: ArenMook on November 27, 2014, 09:04:00 PM

1280x480 is landscape, not portrait.

Also 525 is not dividable by two, as I mentioned. This means your UI will always be blurry.

Title: Re: UISlider
Post by: TokyoDan on November 28, 2014, 03:03:31 AM

I changed the 525 to 526. And that 1280 x 480 is what is automatically set whenever I create a UIroot or do something that creates one even if I don't want it to. Even reading the manual about UIroot doesn't give me an idea of how those measurements related to the actual size of my game (the part that isn't using NGUI). Most of the time I use NGUI an an overlay for my game which is now 526x700. If I tap the pause button which is a normal non-NGUI 3D game object it overlays my normal 3D game screen with the NGUI sliders. So that is why the game size of 526x700 is different from the UIroot of 1280x480 which was set by default when the UIroot was created.

It's all very confusing and even reading the manual I have no idea of how anything NGUI relates to the non-NGUI part of my game as far as size.  Although it kooks OK when built and in the Game window. e.g. the sliders may take up the top 1/4th of the actual game, the NGUI whatever I have is always very very small in the scene window (about 1/10th of the actual game) and I have to zoom way in to see it.

Title: Re: UISlider
Post by: ArenMook on November 30, 2014, 05:56:02 AM

Select the UIRoot, change it to be Constrained, and choose the 526x700 dimensions for it.

Title: Re: UISlider
Post by: phoenix on December 28, 2014, 01:54:58 PM

I have created a settings page with a long list of settings.
I am using a ScrollView and Grid to contain my individual components.
And a ScrollBar to scroll to the appropriate setting component.

One of my components is a UISlider which is inside the UIScrollView and inside the Grid.

The thumb of the UISlider setting component is not moving with the Slide.

If I take the slider out of the scroll view then the thumb follows the slider but when I put the slider inside the scrollview in the grid the thumb no longer follows the slider

Title: Re: UISlider
Post by: ArenMook on December 30, 2014, 01:58:28 PM

Remove the "static" flag from your UIPanel. There is a warning about it for a reason. :P

Title: Re: UISlider
Post by: TokyoDan on January 03, 2015, 10:42:35 PM

I don't have a UIRoot component.

Title: Re: UISlider
Post by: daipayanRoy on January 20, 2015, 03:25:25 AM

I am fairly new to NGUI. i want to know, how do i scroll a label with text up or down based on the slider movement.
Thanks in advance. :)

Title: Re: UISlider
Post by: ArenMook on January 20, 2015, 10:32:01 PM

Scroll a label with text? Labels don't have scrollable text. Scroll views can scroll the content, and you can put a label inside this scroll view. You can then use a slider as the scroll bar.