Skip to content

Add unit property to NumberRange component #3

@jeanaurent

Description

@jeanaurent

Problem:
The current NumberRange component accepts raw numeric inputs without context. Users entering values like "1000-5000" do not indicate the measurement unit (kilograms, meters, dollars, etc.), leading to ambiguity in data entry and poor user experience.

Solution:
Show unit labels (e.g., "kg", "%", "m", "USD") as prefixes to the min and max input fields.

Description of the proposal:

  1. The backend must specify the unit code as a string
  2. Add unit property to NumberRange Class
class NumberRange {
  ...
  public Unit: string | null = null; 
}

and to the controller

export class Controller extends InputController<NumberRange> {
  ...
  public unit: string | null = null;
}
  1. Implement a prefix field to each input by using the "input-group-text" class
  • Displayed only if the unit value is not null.
  • Cannot be edited
  • Example of implementation:
{#if unit}
  <span class="input-group-text">{unit}</span>
{/if}
  1. No serialisation changes in the NumberRange component

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions