{"id":13884,"date":"2026-05-11T15:51:19","date_gmt":"2026-05-11T13:51:19","guid":{"rendered":"https:\/\/store.algosyntax.com\/?post_type=documentation&p=13884"},"modified":"2026-05-13T09:04:39","modified_gmt":"2026-05-13T07:04:39","slug":"zoom-scroll-slider-enhanced-ui-2","status":"publish","type":"documentation","link":"https:\/\/store.algosyntax.com\/documentation\/zoom-scroll-slider-enhanced-ui-2\/","title":{"rendered":"Zoom Scroll Slider : Enhanced UI 2"},"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

Zoom Scroll Slider : Enhanced UI 2<\/h1>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

What this covers<\/h2>
  1. What ZoomScrollSlider<\/code> is for<\/li>
  2. What changed from the old wrapper-based flow<\/li>
  3. The new version 2.0 architecture<\/li>
  4. How scrolling and zooming are represented<\/li>
  5. How the default thumb is created<\/li>
  6. How the default background is created<\/li>
  7. How custom thumb widgets work<\/li>
  8. What to adjust first<\/li><\/ol>\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\tDownload Enhanced UI Plugins<\/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
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    What ZoomScrollSliderCanvas Solves<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    UAxZoomScrollSlider<\/code> is a single-axis zoom and scroll control. It replaces the old SmartSliderWidget design in Version 1.0+.<\/p>

    It is meant for editor-style UI where one control represents both: Zooming And Scrolling.
    Examples:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\tTimeline scrollbar\r\nPiano roll zoom scroller\r\nSequencer range control\r\nTrack editor viewport control\r\nClip editor horizontal range control\r\nGrid viewport navigation control<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-107bd20 elementor-widget elementor-widget-text-editor\" data-id=\"107bd20\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"890\" data-end=\"922\">The interaction model is simple:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2e5f36 elementor-widget elementor-widget-code-highlight\" data-id=\"e2e5f36\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>Dragging the thumb body    -> scroll\r\nResizing the thumb edges   -> zoom\r\nClicking the background    -> jump \/ scroll to that position<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f762827 elementor-widget elementor-widget-text-editor\" data-id=\"f762827\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"2092\" data-end=\"2104\">Ofcourse, when you receive the interaction events you can always decide they mean something else but this is what the widget is for.\u00a0<br \/><br \/>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. <code data-start=\"1126\" data-end=\"1147\">UAxSmartCanvasPanel<\/code> owns the movement\/resizing behavior for registered <code data-start=\"1199\" data-end=\"1215\">UAxSmartWidget<\/code> children, while <code data-start=\"1232\" data-end=\"1248\">UAxSmartWidget<\/code> detects which handle was clicked and forwards that intent to the parent canvas.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7bce051 elementor-widget elementor-widget-text-editor\" data-id=\"7bce051\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"2092\" data-end=\"2104\">This article gets a bit technical, Its recommended you can jump to the<\/p><h2 data-section-id=\"17z3i6r\" data-start=\"17910\" data-end=\"17933\">How To Use Section<\/h2><p data-start=\"17935\" data-end=\"18003\">If you&#8217;re trying to recap or just get started quickly. Below we&#8217;ll cover the technicalities\/low level functionalities of the system in case you need to debug or extend it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7f8293f elementor-widget elementor-widget-button\" data-id=\"7f8293f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#HowToUseTheSystem\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">How To Use Section<\/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<div class=\"elementor-element elementor-element-e3a118c e-flex e-con-boxed e-con e-parent\" data-id=\"e3a118c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b227e27 elementor-widget elementor-widget-heading\" data-id=\"b227e27\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Changed In Version 2.0<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc9fdc1 elementor-widget elementor-widget-text-editor\" data-id=\"cc9fdc1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"1438\" data-end=\"1478\">The old version used three moving parts:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e9533e elementor-widget elementor-widget-code-highlight\" data-id=\"4e9533e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>UAxSmartSliderWidget\r\n    owns:\r\n        UAxSmartSliderCanvas\r\n        UAxSmartWidget thumb<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d4911ca elementor-widget elementor-widget-text-editor\" data-id=\"d4911ca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"2402\" data-end=\"2468\">The wrapper owned much of the slider behavior: value conversion, canvas binding, thumb binding, orientation setup, and event rebroadcasting.<\/p><p data-start=\"1772\" data-end=\"1805\">Version 2.0 removes that wrapper.<\/p><p data-start=\"1807\" data-end=\"1828\">The new structure is:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eef93d7 elementor-widget elementor-widget-code-highlight\" data-id=\"eef93d7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>UAxZoomScrollSliderCanvas\r\n    owns:\r\n        optional generated background UBorder\r\n        generated or custom UAxSmartWidget thumb\r\n        scroll \/ zoom value conversion\r\n        thumb geometry setup\r\n        handle policy\r\n        editor validation<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f9e8e8c elementor-widget elementor-widget-text-editor\" data-id=\"f9e8e8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"2090\" data-end=\"2119\">The canvas is now the widget.<\/p><p data-start=\"2121\" data-end=\"2170\">There is no required <code data-start=\"2142\" data-end=\"2169\">UAxZoomScrollSliderWidget<\/code> wrapper.<\/p>\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<div class=\"elementor-element elementor-element-fdb4473 e-flex e-con-boxed e-con e-parent\" data-id=\"fdb4473\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-715249e elementor-widget elementor-widget-heading\" data-id=\"715249e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">The Version 2.0 Mental Model<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b3e1618 elementor-widget elementor-widget-text-editor\" data-id=\"b3e1618\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"2205\" data-end=\"2257\"><code data-start=\"2205\" data-end=\"2232\">UAxZoomScrollSliderCanvas<\/code> has one important child:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9a49906 elementor-widget elementor-widget-code-highlight\" data-id=\"9a49906\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>SliderThumbWidget<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ffde6d elementor-widget elementor-widget-text-editor\" data-id=\"3ffde6d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"2290\" data-end=\"2323\">That thumb is a <code data-start=\"2306\" data-end=\"2322\">UAxSmartWidget<\/code>.<\/p><p data-start=\"2325\" data-end=\"2388\">The thumb\u2019s <code data-start=\"2337\" data-end=\"2355\">FAxSmartGeometry<\/code> is the internal source of truth:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-52d0e5a elementor-widget elementor-widget-code-highlight\" data-id=\"52d0e5a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>SmartGeometry.Start  \/\/ scroll position in geometry space\r\nSmartGeometry.Size   \/\/ visible range \/ zoom size in geometry space<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17e80be elementor-widget elementor-widget-text-editor\" data-id=\"17e80be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"2528\" data-end=\"2570\">The public value(event\/delegate) broadcast by the slider is:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc7d859 elementor-widget elementor-widget-code-highlight\" data-id=\"fc7d859\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>FAxZoomScrollSliderValue\r\n{\r\n    float NormalizedZoomAmount;\r\n    float NormalizedScrollPos;\r\n};<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-257e1e1 elementor-widget elementor-widget-text-editor\" data-id=\"257e1e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"2677\" data-end=\"2737\">This value is not just a raw copy of <code data-start=\"2721\" data-end=\"2736\">SmartGeometry<\/code>.<\/p><p data-start=\"2739\" data-end=\"2914\">That distinction matters because the thumb can have a minimum size. If the minimum thumb size is <code data-start=\"2836\" data-end=\"2842\">0.05<\/code>, then a thumb size of <code data-start=\"2865\" data-end=\"2871\">0.05<\/code> means the logical zoom is <code data-start=\"2898\" data-end=\"2901\">0<\/code>, not <code data-start=\"2907\" data-end=\"2913\">0.05<\/code>.<\/p><p data-start=\"2916\" data-end=\"2937\">So the canvas remaps:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f432ab2 elementor-widget elementor-widget-code-highlight\" data-id=\"f432ab2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>geometry size range:\r\n    MinimumThumbSize -> 1.0\r\n\r\ninto logical zoom range:\r\n    0.0 -> 1.0<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-340d065 e-con-full e-flex e-con e-child\" data-id=\"340d065\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c7465d2 elementor-widget elementor-widget-heading\" data-id=\"c7465d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Horizontal And Vertical Sliders<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e89df5d elementor-widget elementor-widget-text-editor\" data-id=\"e89df5d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"3078\" data-end=\"3117\">The slider works on one axis at a time.<\/p><p data-start=\"3119\" data-end=\"3130\">Horizontal OR Vertical. When you switch the enum or drop down it will respond in that orientation.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a164655 e-con-full e-flex e-con e-child\" data-id=\"a164655\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc4a961 elementor-widget elementor-widget-heading\" data-id=\"fc4a961\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Default Thumb Creation<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a66a439 elementor-widget elementor-widget-text-editor\" data-id=\"a66a439\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"3523\" data-end=\"3591\">Version 2.0 does not require the designer to place a thumb manually.<\/p><p data-start=\"3593\" data-end=\"3636\">If no thumb exists, the canvas creates one:<br \/>UAxSmartWidget<br \/>WidgetTree.RootWidget = UBorder<br \/><br \/>So just a smart widget with a simple border.<br \/>You can override the thumb with your own subclass though.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ab0dc89 e-con-full e-flex e-con e-child\" data-id=\"ab0dc89\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c85afd7 elementor-widget elementor-widget-heading\" data-id=\"c85afd7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Default Background<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89550a4 elementor-widget elementor-widget-text-editor\" data-id=\"89550a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"4786\" data-end=\"4834\">The canvas can also create a default background.<\/p><p data-start=\"4836\" data-end=\"4872\">The background is not a SmartWidget.<\/p><p data-start=\"4874\" data-end=\"4919\">It is a normal <code data-start=\"4889\" data-end=\"4898\">UBorder<\/code> child of the canvas.<\/p><p data-start=\"5458\" data-end=\"5516\">Use <code data-start=\"5462\" data-end=\"5472\">bEnabled<\/code> to turn the generated background on or off.<\/p><p data-start=\"5518\" data-end=\"5548\">Use <code data-start=\"5522\" data-end=\"5535\">BorderBrush<\/code> to style it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-add0e08 e-con-full e-flex e-con e-child\" data-id=\"add0e08\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3bb62fe elementor-widget elementor-widget-heading\" data-id=\"3bb62fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Custom Thumb Widgets<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aafdc8b elementor-widget elementor-widget-text-editor\" data-id=\"aafdc8b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"5575\" data-end=\"5622\">The default thumb is enough for simple sliders.<\/p><p data-start=\"5624\" data-end=\"5683\">For custom visuals or custom internal widget trees, enable:<\/p><p data-start=\"5624\" data-end=\"5683\"><strong>bUseCustomThumbWidgetClass\u00a0<br \/><\/strong><\/p><p data-start=\"5724\" data-end=\"5736\">Then assign:<\/p><div class=\"relative w-full mt-4 mb-1\"><div class=\"\"><div class=\"relative\"><div class=\"h-full min-h-0 min-w-0\"><div class=\"h-full min-h-0 min-w-0\"><div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\"><div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\"><div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\"><div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\"><div class=\"sticky bg-token-border-light\"><strong>CustomThumbWidgetClass<\/strong><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d68ca06 elementor-widget elementor-widget-text-editor\" data-id=\"d68ca06\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"5773\" data-end=\"5824\">The custom class must derive from <code data-start=\"5807\" data-end=\"5823\">UAxSmartWidget<\/code>.<\/p><p data-start=\"5826\" data-end=\"5860\">When custom thumb mode is enabled:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c091554 elementor-widget elementor-widget-code-highlight\" data-id=\"c091554\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>Default thumb settings are hidden\r\nCustom thumb class is shown\r\nCanvas creates the custom SmartWidget\r\nCanvas still configures the slider handle policy<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-601acef elementor-widget elementor-widget-text-editor\" data-id=\"601acef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"6024\" data-end=\"6068\">The custom thumb owns its own visual design.<\/p><p data-start=\"6070\" data-end=\"6108\">The canvas still owns slider behavior.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-740f9f8 e-con-full e-flex e-con e-child\" data-id=\"740f9f8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-10755aa elementor-widget elementor-widget-heading\" data-id=\"10755aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Typical Runtime Flow<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-831991f elementor-widget elementor-widget-text-editor\" data-id=\"831991f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"7720\" data-end=\"7755\">When the user drags the thumb body:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7f56eab elementor-widget elementor-widget-code-highlight\" data-id=\"7f56eab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>UAxSmartWidget detects MiddleHandle\r\n    \u2193\r\nUAxSmartCanvasPanel captures the SmartWidget payload\r\n    \u2193\r\nMouseMove updates SmartGeometry.Start\r\n    \u2193\r\nUAxZoomScrollSliderCanvas detects geometry changed\r\n    \u2193\r\nCanvas recalculates FAxZoomScrollSliderValue\r\n    \u2193\r\nOnSliderValueChange broadcasts<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c677141 elementor-widget elementor-widget-text-editor\" data-id=\"c677141\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"8054\" data-end=\"8091\">When the user resizes the thumb edge:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b13f6a0 elementor-widget elementor-widget-code-highlight\" data-id=\"b13f6a0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>UAxSmartWidget detects Left\/Right or Top\/Bottom handle\r\n    \u2193\r\nUAxSmartCanvasPanel updates SmartGeometry.Start \/ Stop \/ Size\r\n    \u2193\r\nUAxZoomScrollSliderCanvas maps Size into NormalizedZoomAmount\r\n    \u2193\r\nOnSliderValueChange broadcasts<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5ae7831 e-flex e-con-boxed e-con e-parent\" data-id=\"5ae7831\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1ef1bbf elementor-widget elementor-widget-heading\" data-id=\"1ef1bbf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to use the system<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b90634 elementor-widget elementor-widget-menu-anchor\" data-id=\"9b90634\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"HowToUseTheSystem\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cc4de85 e-con-full e-flex e-con e-child\" data-id=\"cc4de85\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2e0ccff elementor-widget elementor-widget-text-editor\" data-id=\"2e0ccff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"8359\" data-end=\"8396\">For a basic horizontal zoom scroller:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef20e11 elementor-widget elementor-widget-code-highlight\" data-id=\"ef20e11\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>1. Add UAxZoomScrollSliderCanvas\r\n2. Leave bUseCustomThumbWidgetClass disabled\r\n3. Set SliderOrientation = Horizontal\r\n4. Adjust DefaultThumbSettings.DefaultScrollPos\r\n5. Adjust DefaultThumbSettings.DefaultZoom\r\n6. Style DefaultThumbSettings.BorderBrush\r\n7. Enable and style DefaultBackgroundSettings\r\n8. Bind to OnSliderValueChange<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f09fcbc e-con-full e-flex e-con e-child\" data-id=\"f09fcbc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e88f4b7 elementor-widget elementor-widget-text-editor\" data-id=\"e88f4b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"8755\" data-end=\"8782\">For a custom-looking thumb:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54c2f8c elementor-widget elementor-widget-code-highlight\" data-id=\"54c2f8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>1. Create a Blueprint class derived from UAxSmartWidget\r\n2. Build the thumb visuals inside that widget\r\n3. Enable bUseCustomThumbWidgetClass\r\n4. Assign the Blueprint class to CustomThumbWidgetClass\r\n5. Bind to OnSliderValueChange<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\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":[132,129],"tags":[136],"class_list":["post-13884","documentation","type-documentation","status-publish","hentry","category-enhanced-ui","category-unreal-engine","tag-userinterface","entry"],"acf":[],"_links":{"self":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/documentation\/13884","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\/13884\/revisions"}],"predecessor-version":[{"id":13938,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/documentation\/13884\/revisions\/13938"}],"wp:attachment":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/media?parent=13884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/categories?post=13884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/tags?post=13884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}