"Building a draggable slider with click-to-jump and drag-to-scrub"
You need a slider that supports both click-to-jump (click anywhere on the track to set the value) and drag-to-scrub (hold and drag to continuously update) in a PanelComponent, but there's no built-in drag helper you can drop into a RenderFragment.
The engine's UI system doesn't expose a high-level drag API for Razor panels. MousePanelEvent has no .Type or event-name field, so you can't distinguish mousedown from mousemove by inspecting the event object itself. You need a different approach to branch between jump and scrub behavior.
The engine ships the exact pattern in its own SliderControl.razor (and ColorHueControl.cs) under addons/base/code/UI/Controls/. The approach:
Value calculation: frac = Clamp(LocalPosition.x / This.Box.Rect.Width, 0, 1) — mouse position relative to the track panel, normalized to 0–1.
Jump vs scrub branching: since MousePanelEvent has no event-type field, pass a bool per binding:
onmousedown→ always act (this is the jump)onmousemove→ act only ifThis.PseudoClass.HasFlag(PseudoClass.Active)(true while pressed — this is the scrub)
Snap to step: MathF.Round(v / step) * step or the engine's float.SnapToGrid(step).
Key SCSS rules for the track:
.track {
pointer-events: all;
height: 14px; /* tall enough to be grabbable */
}
.fill {
pointer-events: none; /* events always target the track */
}Setting pointer-events: none on the fill ensures events always target the track, keeping LocalPosition track-relative. Also drop any transition: width on the fill or scrub will visually lag behind the cursor.
A bare click automatically works as jump-to-position with this design — no special handling needed.
By routing all pointer events to the track (via pointer-events: none on the fill), LocalPosition is always relative to the track panel. The PseudoClass.Active flag — which is true while the mouse button is held down — provides the scrub gate without needing to identify event types. This matches the engine's own slider implementation and avoids inventing a custom drag state machine.