Skip to content

fix(lit): update Slider display value on user input #1022

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ppazosp wants to merge 1 commit into
base: main
Choose a base branch
from
+16 −18
Open

fix(lit): update Slider display value on user input #1022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion renderers/lit/src/0.8/ui/root.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { map } from "lit/directives/map.js";
import { effect } from "signal-utils/subtle/microtask-effect";
import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
import { StringValue } from "@a2ui/web_core/types/primitives";
import { AnyComponentNode, SurfaceID, Theme } from "@a2ui/web_core/types/types";
import { AnyComponentNode, DataValue, SurfaceID, Theme } from "@a2ui/web_core/types/types";
import { themeContext } from "./context/theme.js";
import { structuralStyles } from "./styles.js";
import { componentRegistry } from "./component-registry.js";
Expand Down Expand Up @@ -76,6 +76,19 @@ export class Root extends SignalWatcher(LitElement) {

#weight: string | number = 1;

protected updateBoundData(relativePath: string, value: DataValue) {
if (!this.processor) {
return;
}
this.processor.setData(
this.component,
relativePath,
value,
this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
);
this.requestUpdate();
}

static styles = [
structuralStyles,
css`
Expand Down
19 changes: 2 additions & 17 deletions renderers/lit/src/0.8/ui/slider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import { customElement, property } from "lit/decorators.js";
import { Root } from "./root.js";
import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
import * as Primitives from "@a2ui/web_core/types/primitives";
import * as Types from "@a2ui/web_core/types/types";
import { classMap } from "lit/directives/class-map.js";
import { styleMap } from "lit/directives/style-map.js";
import { structuralStyles } from "./styles.js";
Expand Down Expand Up @@ -62,24 +61,10 @@ export class Slider extends Root {
];

#setBoundValue(value: string) {
if (!this.value || !this.processor) {
if (!this.value || !("path" in this.value) || !this.value.path) {
return;
}

if (!("path" in this.value)) {
return;
}

if (!this.value.path) {
return;
}

this.processor.setData(
this.component,
this.value.path,
value,
this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
);
this.updateBoundData(this.value.path, value);
Comment on lines +64 to +67
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For improved readability, you could consider extracting the path into a variable first, then checking its validity. This would make the intent of the code clearer at a glance.

    const path = this.value && "path" in this.value ? this.value.path : undefined;
    if (!path) {
      return;
    }
    this.updateBoundData(path, value);

Copy link
Copy Markdown
Author

@ppazosp ppazosp Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I considered this, but the current pattern (guard clause with early return) is consistent with how all other interactive components handle path validation (checkbox.ts, datetime-input.ts, text-field.ts). Changing it here would make the Slider inconsistent with the rest. I'd rather keep it aligned.

}
Comment on lines 63 to 68
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This is a great fix for the slider value update issue. However, I noticed that there are no new tests included with this change. The repository style guide requires tests for code changes. Adding a regression test for this bug would be valuable to ensure it doesn't reappear in the future. Could you please add a test that covers this scenario?

References
  1. If there are code changes, code should have tests. (link)

Copy link
Copy Markdown
Author

@ppazosp ppazosp Mar 29, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's no existing test infrastructure for v0.8 UI components in the Lit renderer, renderers/lit/ only has model.test.ts and v0.9 tests. Setting up component testing (DOM rendering, event simulation) for v0.8 would be a significant effort beyond the scope of this one-line fix. Happy to contribute tests as a follow-up if the maintainers set up the testing scaffold or point me to the preferred approach.


#renderField(value: string | number) {
Expand Down