Zoom Scroll Slider : Enhanced UI 2

What this covers

  1. What ZoomScrollSlider is for
  2. What changed from the old wrapper-based flow
  3. The new version 2.0 architecture
  4. How scrolling and zooming are represented
  5. How the default thumb is created
  6. How the default background is created
  7. How custom thumb widgets work
  8. What to adjust first
Download Enhanced UI Plugins

What ZoomScrollSliderCanvas Solves

UAxZoomScrollSlider is a single-axis zoom and scroll control. It replaces the old SmartSliderWidget design in Version 1.0+.

It is meant for editor-style UI where one control represents both: Zooming And Scrolling.
Examples:

				
					Timeline scrollbar
Piano roll zoom scroller
Sequencer range control
Track editor viewport control
Clip editor horizontal range control
Grid viewport navigation control

The interaction model is simple:

				
					Dragging the thumb body    -> scroll
Resizing the thumb edges   -> zoom
Clicking the background    -> jump / scroll to that position

Ofcourse, when you receive the interaction events you can always decide they mean something else but this is what the widget is for. 

The panel converts those logical values into the physical position and size needed by UMG.This is built on top of the existing SmartCanvas model. UAxSmartCanvasPanel owns the movement/resizing behavior for registered UAxSmartWidget children, while UAxSmartWidget detects which handle was clicked and forwards that intent to the parent canvas.

This article gets a bit technical, Its recommended you can jump to the

How To Use Section

If you’re trying to recap or just get started quickly. Below we’ll cover the technicalities/low level functionalities of the system in case you need to debug or extend it.

How To Use Section

What Changed In Version 2.0

The old version used three moving parts:

				
					UAxSmartSliderWidget
    owns:
        UAxSmartSliderCanvas
        UAxSmartWidget thumb

The wrapper owned much of the slider behavior: value conversion, canvas binding, thumb binding, orientation setup, and event rebroadcasting.

Version 2.0 removes that wrapper.

The new structure is:

				
					UAxZoomScrollSliderCanvas
    owns:
        optional generated background UBorder
        generated or custom UAxSmartWidget thumb
        scroll / zoom value conversion
        thumb geometry setup
        handle policy
        editor validation

The canvas is now the widget.

There is no required UAxZoomScrollSliderWidget wrapper.

The Version 2.0 Mental Model

UAxZoomScrollSliderCanvas has one important child:

				
					SliderThumbWidget

That thumb is a UAxSmartWidget.

The thumb’s FAxSmartGeometry is the internal source of truth:

				
					SmartGeometry.Start  // scroll position in geometry space
SmartGeometry.Size   // visible range / zoom size in geometry space

The public value(event/delegate) broadcast by the slider is:

				
					FAxZoomScrollSliderValue
{
    float NormalizedZoomAmount;
    float NormalizedScrollPos;
};

This value is not just a raw copy of SmartGeometry.

That distinction matters because the thumb can have a minimum size. If the minimum thumb size is 0.05, then a thumb size of 0.05 means the logical zoom is 0, not 0.05.

So the canvas remaps:

				
					geometry size range:
    MinimumThumbSize -> 1.0

into logical zoom range:
    0.0 -> 1.0

Horizontal And Vertical Sliders

The slider works on one axis at a time.

Horizontal OR Vertical. When you switch the enum or drop down it will respond in that orientation.

Default Thumb Creation

Version 2.0 does not require the designer to place a thumb manually.

If no thumb exists, the canvas creates one:
UAxSmartWidget
WidgetTree.RootWidget = UBorder

So just a smart widget with a simple border.
You can override the thumb with your own subclass though.

Default Background

The canvas can also create a default background.

The background is not a SmartWidget.

It is a normal UBorder child of the canvas.

Use bEnabled to turn the generated background on or off.

Use BorderBrush to style it.

Custom Thumb Widgets

The default thumb is enough for simple sliders.

For custom visuals or custom internal widget trees, enable:

bUseCustomThumbWidgetClass 

Then assign:

CustomThumbWidgetClass

The custom class must derive from UAxSmartWidget.

When custom thumb mode is enabled:

				
					Default thumb settings are hidden
Custom thumb class is shown
Canvas creates the custom SmartWidget
Canvas still configures the slider handle policy

The custom thumb owns its own visual design.

The canvas still owns slider behavior.

Typical Runtime Flow

When the user drags the thumb body:

				
					UAxSmartWidget detects MiddleHandle
    ↓
UAxSmartCanvasPanel captures the SmartWidget payload
    ↓
MouseMove updates SmartGeometry.Start
    ↓
UAxZoomScrollSliderCanvas detects geometry changed
    ↓
Canvas recalculates FAxZoomScrollSliderValue
    ↓
OnSliderValueChange broadcasts

When the user resizes the thumb edge:

				
					UAxSmartWidget detects Left/Right or Top/Bottom handle
    ↓
UAxSmartCanvasPanel updates SmartGeometry.Start / Stop / Size
    ↓
UAxZoomScrollSliderCanvas maps Size into NormalizedZoomAmount
    ↓
OnSliderValueChange broadcasts

How to use the system

For a basic horizontal zoom scroller:

				
					1. Add UAxZoomScrollSliderCanvas
2. Leave bUseCustomThumbWidgetClass disabled
3. Set SliderOrientation = Horizontal
4. Adjust DefaultThumbSettings.DefaultScrollPos
5. Adjust DefaultThumbSettings.DefaultZoom
6. Style DefaultThumbSettings.BorderBrush
7. Enable and style DefaultBackgroundSettings
8. Bind to OnSliderValueChange

For a custom-looking thumb:

				
					1. Create a Blueprint class derived from UAxSmartWidget
2. Build the thumb visuals inside that widget
3. Enable bUseCustomThumbWidgetClass
4. Assign the Blueprint class to CustomThumbWidgetClass
5. Bind to OnSliderValueChange