Tag: umg

Improved Two-Handle Range Slider

GIF showing a two-handle range slider in Unreal Engine UMG, with the mouse hovering over the bar and handles, triggering hover and pressed visual states.

Enhanced the two-handle range slider with proper hover and pressed states for both the slider bar and the handles. This provides clearer visual feedback during interaction and improves overall usability.

Improved: Divider Styling with Custom Material

Side-by-side comparison of two UI dividers in Unreal Engine. The top one uses a UMG border and looks pixelated. The bottom one is using a custom material-based divider with improved styling.

Replaced UMG borders with a custom material to enhance visual quality, styling, and flexibility for slim UI dividers. Unreal Engine’s default borders often appeared pixelated when used with narrow elements. The new material resolves this issue and supports real-time control over sharpness, color gradients, and dynamic adjustments during play.

Two-Handle Range Slider

Screenshot of custom dual-handle slider widgets used for filtering units in AVE II for the Unreal Engine

Custom dual-handle range slider for defining both lower and upper bounds. This widget features snapping logic that utilizes normalized values for precise filtering. Replaces Unreal Engine’s default single-handle slider, which only supports an upper limit.