{"id":11036,"date":"2024-11-15T08:37:57","date_gmt":"2024-11-15T06:37:57","guid":{"rendered":"https:\/\/store.algosyntax.com\/?post_type=asx-lms-tutorial-cpt&p=11036"},"modified":"2026-04-08T23:57:14","modified_gmt":"2026-04-08T21:57:14","slug":"smart-slider-widget-ue-enhanced-ui-plugin","status":"publish","type":"documentation","link":"https:\/\/store.algosyntax.com\/documentation\/smart-slider-widget-ue-enhanced-ui-plugin\/","title":{"rendered":"Smart Slider Widget UE: Enhanced UI Plugin"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The Smart Slider Widget for unreal engine was built for one thing : To allow both Zooming and Scrolling From one Widget.<\/p>

Why? : To reduce UI clutter and make more space for other widget especially in a busy UI like Video Editors or DAW UI. And its easier to zoom and scroll from the same widget.
Plus it’s just cool.<\/p>

You can see examples of such a widget being used in a lot DAWs, like Ableton Live’s Arrangement mode or FL Studio’s Piano Roll and its Playlist.\u00a0<\/p>

These are generally busy interfaces that run out of widget real estate quick.\u00a0
You can use the widget for anything , not just line grids.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tEnhanced UI Plugin Full Feature List<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"SmartSlider\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

Smart Slider Demo Map Location<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

If you want to quickly get started with the Smart Slider Widget for unreal engine, You can open the demo map located at\u00a0

EnhancedUI_Content\/SmartSlider\/Maps\/SmartSliderDemoMap<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

The Blueprints<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The actual widget blueprints that this Demo map uses are located at:<\/p>

EnhancedUI_Content\/SmartSlider\/Blueprints<\/strong><\/p>

The main blueprint that gets added to the map is\u00a0
WBP_SmartSlidersDemoWidget.uasset<\/strong><\/p>

This widget brings all the other widgets together and provides and example use case and handling of user events from the SmartSlider.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

On Slider Value Change Event<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Whenever the user interacts with a smart slider widget, this event on the Smart Slider widget will get fired, and it gives the Scroll value (between 0 and 1) and the Zoom Value, also between 0 and 1.
What you do with thos values is up to you. You can do actual scrolling\/zoom or something else based on that value as the user plays with it…<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Customizing the Smart Slider Widget<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The smart slider’s design is completely customizable. We tried not to make any design decsions for you except minor layout decision. The Looks or widgets you use are completly upto you. have just provided a template that you can use or customize or just start from scratch.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Inheriting from AxSmartSliderWidget<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

If you want to make your own Smart Slider Widget, you must inherit from the AxSmartSliderWidget class…

Which will guide you on the requirements of what make a SmartSliderWidget.

First you need to add a AxSmartSliderCanvas<\/strong> Panel to your widget hierachy and call it SliderCanvas<\/strong>.\u00a0
This is your usual Canvas Panel but with smart features.\u00a0

Then the Second Requirement is to add a “ThumbWidget”\u00a0<\/strong>which can be ANY widget that inherits from AxSmartWidget.\u00a0
What that widget contains or is designed, the system pretty much leaves it up to you. So go ahead and add images and or whatever it is you want.
The ThumbWidget<\/strong> needs to sit within\/ be a child of\u00a0 the SliderCanvas<\/strong> you added earlier.

That’s it, you’ve just created a custom SmartSliderWidget.
You can even Scroll buttons on the top and bottom of this Widget. its all upto you.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Important Blueprint callable Functions<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In addition to events , there are Blueprint functions you can call on the SmartSlider programmatically to control how it behaves. Read their tooltips to see what they do.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tGet The Enhanced UI Plugin<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"featured_media":0,"template":"elementor_header_footer","categories":[129,132],"tags":[],"class_list":["post-11036","documentation","type-documentation","status-publish","hentry","category-unreal-engine","category-enhanced-ui","entry"],"acf":[],"_links":{"self":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/documentation\/11036","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/types\/documentation"}],"version-history":[{"count":2,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/documentation\/11036\/revisions"}],"predecessor-version":[{"id":13347,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/documentation\/11036\/revisions\/13347"}],"wp:attachment":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/media?parent=11036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/categories?post=11036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/tags?post=11036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}