--- title: "pdx-material-range-slider JSON API (Canonical)" slug: "pdx-material-range-slider-json-api" doc_type: "api-reference" component: "pdx-material-range-slider" document_kind: "json-api-canonical" reference_mode: "canonical" contract_format: "json" contract_source: "runtime-and-code" description: "Referencia canonica do contrato JSON do componente pdx-material-range-slider." category: "components" sub_category: "dynamic-fields" audience: - "frontend" - "architect" - "platform-team" level: "advanced" status: "active" owner: "praxis-ui" source_of_truth: - "projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.metadata.ts" - "projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.component.ts" - "projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.component.html" - "projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts" - "projects/praxis-core/src/lib/models/material-field-metadata.interface.ts" source_of_truth_last_verified: "2026-04-27" last_updated: "2026-04-27" toc: true sidebar: true tags: - "json-api" - "canonical-contract" - "pdx-material-range-slider" api_stability: "canonical" schema_verified: true runtime_verified: true editor_coverage_verified: false runtime_scope: "public" legacy_paths_present: false has_known_mismatches: false related_components: - "praxis-table" - "pdx-base-input-runtime-contract" - "pdx-material-slider" --- # pdx-material-range-slider Este documento e a referencia canonica da API JSON de pdx-material-range-slider. ## Summary - Tipo documental: API reference canonica de contrato JSON. - Source of truth: runtime e codigo declarados no frontmatter. - Objetivo operacional: consulta rapida, auditavel e deterministica sob pressao. - Resumo funcional: Contrato JSON metadata-driven com comportamento definido por runtime e schema associado. ## Purpose and scope - O componente consome payload JSON metadata-driven e expoe comportamento runtime configuravel por contrato. - Esta referencia cobre contrato publico, classificacao de paths e semantica de cobertura (runtime/schema/editor). - Fora de escopo: quickstart, tutorial narrativo e notas arquiteturais que nao alteram contrato publico. ## Consulta rapida (obrigatorio) | Regra/tema | Observado | Canonico desejado | Status | Evidencia | | ----------------------- | --------------------------- | ---------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Component id | `pdx-material-range-slider` | Manter ID canonico estavel e versionado por contrato | Active | frontmatter.component | | Primary contract source | `runtime-and-code` | Runtime, schema e docs devem permanecer rastreaveis | Partial | frontmatter.contract_source + source_of_truth | | Runtime coverage | `true` | Comportamentos runtime criticos devem ficar explicitamente verificados | Active | `projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.metadata.ts`, `projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.component.ts`; focused component specs for native thumb accessibility and readonly/presentation interaction guards, 2026-04-27 | | Schema/type coverage | `true` | Tipos e schema devem refletir paths publicos do contrato | Active | source_of_truth + Detailed API reference | | Editor/tooling coverage | `false` | Editor/tooling deve espelhar somente contrato publico suportado | Partial | `projects/praxis-core/src/lib/metadata/field-selector-control-type.constants.ts`, `projects/praxis-dynamic-fields/src/lib/services/component-registry/component-registry.service.ts` | | Legacy paths | `false` | Segregar legado de caminhos canonicos com janela de migracao | Active | frontmatter.legacy_paths_present | | Known mismatches | `false` | Registrar observed vs desired de forma auditavel | Active | frontmatter.has_known_mismatches | ## Source of truth | Source | Kind | Notes | | ------------------------------------------------------------------------------------------------------------ | --------------- | ------------------------------------------------------------------- | | projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.metadata.ts | schema-metadata | Arquivo presente no repositorio e usado como evidencia de contrato. | | projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.component.ts | runtime-code | Arquivo presente no repositorio e usado como evidencia de contrato. | | projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.component.html | runtime-code | Arquivo presente no repositorio e usado como evidencia de contrato. | | projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts | runtime-code | Arquivo presente no repositorio e usado como evidencia de contrato. | | projects/praxis-core/src/lib/models/material-field-metadata.interface.ts | schema-types | Arquivo presente no repositorio e usado como evidencia de contrato. | ## Support legend - **Active**: suportado em runtime e liberado para uso externo. - **Partial**: suporte parcial, com restricoes, lacunas ou validacao incompleta. - **Declared-only**: declarado em tipos/schema sem evidencia operacional completa. - **Schema-only**: presente em schema/tipos sem cobertura runtime confirmada. - **Deprecated**: legado suportado por janela de migracao definida. ## Contract status snapshot | Item | Value | Notes | | ------------------------ | ------------------ | ---------------------------------------------- | | Reference mode | `canonical` | Deve permanecer canonico | | Contract format | `json` | Contrato metadata-driven | | Contract source | `runtime-and-code` | Alinhar com source_of_truth | | Runtime scope | `public` | Escopo publicado para consumidores | | Runtime verified | `true` | Revisar sempre com evidencia de runtime | | Schema verified | `true` | Revisar sempre com evidencia de tipos/schema | | Editor coverage verified | `false` | Revisar sempre com evidencia de editor/tooling | | Legacy paths present | `false` | Segregar legado de contrato canonico | | Has known mismatches | `false` | Divergencias devem aparecer em secao dedicada | ## Contract classification (obrigatorio) ### Canonical paths (public contract) | Path | Type | Required | Default | Status | Notes | | ---------------------- | ------- | -------- | ------- | ------- | ------------------------------------------------- | | `metadata` | object | true | n/a | Partial | See Detailed API reference for runtime semantics. | | `readonlyMode` | boolean | false | n/a | Partial | See Detailed API reference for runtime semantics. | | `disabledMode` | boolean | false | n/a | Partial | See Detailed API reference for runtime semantics. | | `visible` | boolean | false | n/a | Partial | See Detailed API reference for runtime semantics. | | `presentationMode` | boolean | false | n/a | Partial | See Detailed API reference for runtime semantics. | | `metadata.controlType` | string | false | n/a | Partial | See Detailed API reference for runtime semantics. | | `metadata.mode` | string | false | n/a | Partial | See Detailed API reference for runtime semantics. | | `metadata.min` | number | false | n/a | Partial | See Detailed API reference for runtime semantics. | ### Supported legacy paths Nenhum path legado suportado foi identificado nesta revisao. ### Internal-only paths Nao ha paths internal-only confirmados no contrato publico desta revisao. ### Experimental paths Nao ha paths experimentais confirmados no contrato publico desta revisao. ## Public contract surface (obrigatorio) ### Top-level configuration blocks | Block | Purpose | Required | Merge strategy | Notes | | ------------------ | ------------------------------------------- | -------- | -------------- | ---------------------------------------------------------------------- | | `metadata` | Payload declarativo principal do componente | true | deep-merge | runtime linkage verified for core flows (component specs, 2026-04-27). | | `readonlyMode` | Override de readonly no host/runtime | false | override | readonly blocks slider interaction and exposes `aria-readonly` on native thumbs (component specs, 2026-04-27). | | `disabledMode` | Override de disabled no host/runtime | false | override | disabled blocks slider interaction and exposes disabled state through Material slider/native controls (component specs, 2026-04-27). | | `visible` | Override de visibilidade no host/runtime | false | override | runtime linkage verified for core flows (component specs, 2026-03-06). | | `presentationMode` | Renderizacao de apresentacao sem interacao | false | override | presentation is treated as readonly/non-interactive and exposes `aria-readonly` (component specs, 2026-04-27). | ### Nested configuration blocks | Path | Type | Required | Default | Constraints | Notes | | ---------------------------- | -------------------------- | -------- | ------- | ----------------- | ------------------------------------ | | `metadata.controlType` | string | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.mode` | string | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.min` | number | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.max` | number | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.step` | number | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.showTicks` | boolean | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.discrete` | boolean | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.displayWith` | unknown | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.valueLabelDisplay` | string | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.valueLabelFormat` | string | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.marks` | boolean \| array \| string | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.semanticBands` | array \| string | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.distribution` | array \| object \| string | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.track` | string | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.size` | string | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.showInputs` | boolean | false | n/a | component-defined | Partial; verify per source_of_truth. | | `metadata.minDistance` | number | false | n/a | component-defined | Partial; verify per source_of_truth. | ### Input bindings (inbound data) | Binding/Path | Type | Required | Source | Runtime normalization | Notes | | ------------------ | ------- | -------- | ------------ | --------------------- | --------------------------------- | | `metadata` | object | true | host-json | component-defined | Primary inbound contract payload. | | `readonlyMode` | boolean | false | host-runtime | verified | Blocks slider interaction and exposes readonly semantics. | | `disabledMode` | boolean | false | host-runtime | verified | Blocks slider interaction through disabled state. | | `visible` | boolean | false | host-runtime | not-yet-verified | Host-level behavioral override. | | `presentationMode` | boolean | false | host-runtime | verified | Non-interactive presentation behavior follows readonly semantics. | ### Output events | Event | Payload | Trigger | Stability | Notes | | -------------- | ------- | ------------- | ------------ | ----------------------------------------------- | | `valueChange` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. | | `focusChange` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. | | `nativeBlur` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. | | `nativeChange` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. | ### External side channels | Channel | Direction | Contract | Failure mode | Notes | | ----------------------- | ------------- | ----------------- | ----------------- | ------------------------------------------------------------------------- | | `host/services/storage` | bidirectional | component-defined | component-defined | Side channels variam por componente e host; verificar em source_of_truth. | ### Host/runtime dependencies | Dependency | Required | Environment | Purpose | Notes | | -------------------------------------- | -------- | -------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------ | | `material-range-slider.metadata.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.metadata.ts`. | | `material-range-slider.component.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.component.ts`. | | `material-range-slider.component.html` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.component.html`. | | `simple-base-input.component.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts`. | | `material-field-metadata.interface.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-core/src/lib/models/material-field-metadata.interface.ts`. | ## Coverage by surface (obrigatorio) ### Coverage matrix (runtime, schema/type, editor/tooling) | Surface | Verified | Coverage status | Evidence | Notes | | -------------- | -------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | Runtime | `true` | Active | `projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.metadata.ts`, `projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.component.ts` | Single/range values, validators, marks, semantic bands, distribution, native thumb accessible names, required/invalid/valuetext states and readonly/presentation interaction guards verified via focused component specs on 2026-04-27; editor/tooling coverage remains independent. | | Schema/Types | `true` | Active | source_of_truth + Detailed API reference | Reconcile schema/types with canonical paths during follow-up when needed. | | Editor/Tooling | `false` | Partial | `projects/praxis-core/src/lib/metadata/field-selector-control-type.constants.ts`, `projects/praxis-dynamic-fields/src/lib/services/component-registry/component-registry.service.ts` | Selector/control-type tooling linkage verified via default selector map and registry seeding; visual editor end-to-end coverage remains not-yet-verified. | ### Runtime coverage boundaries - Ambientes suportados: browser/dev/prod; SSR/hydration appears to be component-dependent unless explicitly verified. - Pre-condicoes: payload JSON valido, bindings de host consistentes e dependencias descritas no source_of_truth. - Fora de cobertura confirmada: caminhos internos, experimentais ou aliases nao enumerados formalmente. ### Editor and tooling notes - Evidencia de tooling: selector `pdx-*` mapeado em `DEFAULT_FIELD_SELECTOR_CONTROL_TYPE_MAP` e semeado no `ComponentRegistryService`; editor visual E2E permanece not-yet-verified. - O que esta exposto no editor visual depende da cobertura real do workspace e nao deve ser inferido como suporte runtime total. - Campos disponiveis apenas via JSON/manual devem continuar no contrato, com rotulo explicito de cobertura parcial. - Quando houver divergencia entre editor e runtime, manter mismatch rastreavel em secao dedicada. ## Resolution and precedence model (obrigatorio) ### Merge order 1. defaults do componente 2. contrato JSON recebido 3. overrides de host/runtime 4. normalizacoes internas ### Fallback order contrato explicito -> aliases legados (quando suportados) -> defaults internos -> comportamento seguro ### Override points - inputs publicos do componente - configuracao JSON de runtime - integracoes de host (servicos/tokens/adapters) ### Runtime normalization Alias e defaults devem convergir para paths canonicos; onde nao houver evidencia, manter not-yet-verified de forma explicita. ### Precedence rules Em conflito entre alias legado e path canonico, priorizar path canonico e registrar janela de migracao do legado. ## Validation and error semantics (obrigatorio) ### Validation model | Path/Rule | Validation phase | Behavior on fail | Error code / warning | Notes | | --------------- | ---------------- | --------------------------------------- | -------------------- | -------------------------------------------------------------------- | | canonical-paths | parse/runtime | component-defined (warn/reject/default) | not-yet-standardized | Semantica detalhada preservada na referencia tecnica por componente. | ### Invalid and unknown field handling - Campos desconhecidos: comportamento component-defined (ignore, warn ou reject). - Tipos invalidos: pode haver fallback, warning ou falha, conforme runtime especifico. - Valores fora de dominio: registrar observed vs desired em Known limitations and mismatches. ### Fail-open / fail-closed behavior | Condition | Mode | Runtime behavior | Consumer impact | | ------------------------ | ----------------- | ---------------- | ---------------------------------------------------------------------------- | | invalid-or-unknown-field | component-defined | not-yet-verified | Pode gerar warning, fallback silencioso ou rejeicao; validar por componente. | ### Runtime warnings vs hard failures | Condition | Severity | Observability | Consumer action | | --------------------------------- | ---------------- | ----------------------------- | ----------------------------------------------- | | partial-or-declared-only-coverage | warning | logs/eventos do componente | Confirmar ligacao runtime antes de uso critico. | | mismatch-confirmed | error-or-warning | componente/host observability | Planejar migracao e corrigir contrato/runtime. | ## Detailed API reference ### Preserved technical reference (normalized from previous revision) ### 1. Visao Geral e Quando Usar `pdx-material-range-slider` suporta dois modos via JSON: - `single`: um valor numerico. - `range`: faixa com `start` e `end`. Use quando precisar: - filtro por intervalo numerico; - regras de distancia minima/maxima entre extremos; - inputs numericos auxiliares (`showInputs`). ### 2. API do Componente (Inputs/Outputs) | Propriedade | Tipo | Padrao | Obrigatorio | Comportamento | | ------------------ | ------------------------------------- | ------- | ----------------- | ----------------------------------- | | `metadata` | `MaterialRangeSliderMetadata` | - | Sim | Contrato principal do range slider. | | `readonlyMode` | `boolean` | `false` | Nao | Sobrescreve leitura no host. | | `disabledMode` | `boolean` | `false` | Nao | Sobrescreve disabled no host. | | `visible` | `boolean` | `true` | Nao | Controla exibicao no host. | | `presentationMode` | `boolean` | `false` | Nao | Modo apresentacao sem edicao. | | `valueChange` | `number \| {start:number,end:number}` | - | Output base input | Mudanca de valor single/range. | ### 3. Matriz de Cobertura JSON (Completa) #### 3.1 Campos especificos do componente | Caminho JSON | Tipo | Status | Comportamento em runtime | | ---------------------------------------------------- | ---------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------- | | `metadata.controlType` | `'rangeSlider'` | Ativo | Define renderer range-slider. | | `metadata.mode` | `'single' \| 'range'` | Ativo | Alterna template single vs range. | | `metadata.min` | `number` | Ativo | Limite minimo aplicado ao slider e validacao. | | `metadata.max` | `number` | Ativo | Limite maximo aplicado ao slider e validacao. | | `metadata.step` | `number \| null` | Ativo | Incremento dos thumbs e inputs auxiliares; `null` cai no step seguro atual e fica reservado para valores restritos por marks. | | `metadata.showTicks` | `boolean \| 'auto'` | Ativo | Exibe tick marks no slider. | | `metadata.discrete` | `boolean` | Ativo | Usa modo discreto do slider Material. | | `metadata.displayWith` | `(value:number)=>string` | Ativo | Formata exibicao de valor do slider. | | `metadata.thumbLabel` | `boolean` | Ativo | Habilita o value label quando `valueLabelDisplay` nao foi informado. | | `metadata.valueLabelDisplay` | `'off' \| 'auto' \| 'on'` | Ativo | Controla a exibicao declarativa do value label; `off` tem precedencia. | | `metadata.valueLabelFormat` | `string` | Ativo | Formata labels com presets declarativos como `percent`, `compact` e `storage`. | | `metadata.marks` | `boolean \| array \| string` | Ativo | Habilita tick marks e, quando array/JSON, renderiza labels posicionados no trilho. | | `metadata.semanticBands` | `array \| string` | Ativo | Renderiza faixas semanticas no trilho para risco, prioridade ou dominios numericos. | | `metadata.distribution` | `array \| object \| string` | Ativo | Renderiza histograma compacto acima do slider; quando configurado como objeto, `colorMode` (`selection`/`gradient`/`theme`) colore os bins cobertos pelo range atual com tokens do tema ou cores declaradas. | | `metadata.track` | `'normal' \| 'inverted' \| 'none'` | Parcial | Aplica classes/estilo para variacao visual do track; nao altera a semantica do valor. | | `metadata.size` | `'small' \| 'medium' \| 'large'` | Ativo | Ajusta densidade visual do slider. | | `metadata.scale` | `string` | Ativo | Aplica escala declarativa ao texto exibido (`percent`, `log`, `pow2`). | | `metadata.showInputs` | `boolean` | Ativo | Exibe campos numericos auxiliares abaixo. | | `metadata.minDistance` | `number` | Ativo | Valida distancia minima em modo range. | | `metadata.maxDistance` | `number` | Ativo | Valida distancia maxima em modo range. | | `metadata.validators.minMessage` | `string` | Ativo | Mensagem custom para erro `min`. | | `metadata.validators.maxMessage` | `string` | Ativo | Mensagem custom para erro `max`. | | `metadata.validators.rangeMessage` | `string` | Ativo | Mensagem custom para ordem invalida (`start > end`). | | `metadata.validators.distanceMessage` | `string` | Ativo | Mensagem custom para min/max distance. | | `metadata.vertical` | `boolean` | Ativo | Classe CSS para variacao vertical no container. | | `metadata.readonly` | `boolean` | Parcial | Aplicado em classe/inputs numericos; slider principal nao desliga totalmente por esse flag sozinho. | | `metadata.invert` | `boolean` | Declared-only | Declarado no contrato sem binding dedicado. | | `metadata.inlineDistribution` | `object \| array \| string` | Declared-only | Campo de contrato para variantes inline, sem uso aqui. | | `metadata.distribution` | `object \| array \| string` | Declared-only | Sem uso neste renderer. | | `metadata.quickPresets` | `array \| string` | Declared-only | Sem uso neste renderer. | | `metadata.quickPresetsAuto` | `boolean` | Declared-only | Sem uso neste renderer. | | `metadata.quickPresetsLabels` | `object \| string` | Declared-only | Sem uso neste renderer. | | `metadata.inlineTexts` | `object \| string` | Declared-only | Sem uso neste renderer. | | `metadata.allowHalf` | `boolean` | Declared-only | Sem uso neste renderer. | | `metadata.ratingAllowHalf` | `boolean` | Declared-only | Sem uso neste renderer. | | `metadata.ratingPrecision` | `number` | Declared-only | Sem uso neste renderer. | | `metadata.precision` | `string \| number` | Declared-only | Sem uso neste renderer. | | `metadata.ratingMin/ratingMax/ratingStep/itemsCount` | `number` | Declared-only | Sem uso neste renderer. | #### 3.2 Campos herdados compartilhados (exaustivo) Contrato compartilhado de input base: - [pdx-base-input-runtime-contract.json-api.md](projects/praxis-dynamic-fields/src/lib/base/pdx-base-input-runtime-contract.json-api.md) Resumo de composicao deste componente: - `Ativo`: mode, limites, distancia, showInputs, mensagens de validacao, marks, bandas semanticas, distribuicao e value labels declarativos. - `Parcial`: `readonly` e `track` como variacao visual. - `Declared-only`: bloco inline/rating do contrato amplo de range slider. ### 4. Mapeamento de Comportamento - `mode=single`: valor unico no `control()`. - `mode=range`: valor `{start, end}` sincronizado com `rangeGroup` interno. - Validacoes de grupo (range): - ordem (`start <= end`), - distancia minima, - distancia maxima. - Inputs auxiliares: refletem o mesmo estado do slider quando `showInputs=true`. ### 5. Exemplo Minimo (JSON + Uso) ```json { "componentId": "pdx-material-range-slider", "metadata": { "name": "temperature", "label": "Temperatura", "controlType": "rangeSlider", "mode": "single", "min": 0, "max": 100, "step": 1 } } ``` Uso: entrada numerica unica por slider. ### 6. Exemplo Corporativo (JSON + Uso) ```json { "componentId": "pdx-material-range-slider", "metadata": { "name": "approvedRange", "label": "Faixa Aprovada", "controlType": "rangeSlider", "mode": "range", "min": 0, "max": 100000, "step": 100, "showTicks": true, "valueLabelDisplay": "on", "valueLabelFormat": "compact", "marks": [ { "value": 0, "label": "Min" }, { "value": 50000, "label": "Meta", "tone": "info" }, { "value": 100000, "label": "Max" } ], "semanticBands": [ { "start": 0, "end": 40000, "label": "Conservador", "tone": "success" }, { "start": 40000, "end": 75000, "label": "Meta", "tone": "info" }, { "start": 75000, "end": 100000, "label": "Critico", "tone": "danger" } ], "distribution": { "colorMode": "gradient", "gradientStartColor": "var(--md-sys-color-primary)", "gradientEndColor": "var(--md-sys-color-tertiary)", "bins": [3, 9, 16, 11, 5], "maxValue": 16 }, "showInputs": true, "minDistance": 1000, "maxDistance": 50000, "validators": { "rangeMessage": "Inicio deve ser menor ou igual ao fim.", "distanceMessage": "Distancia fora da faixa permitida." }, "hint": "Defina a faixa financeira autorizada." } } ``` Uso: controle de intervalo financeiro com validacoes de distancia. ### 7. Troubleshooting e Armadilhas Comuns 1. Slider nao entra no modo range. Correcao: usar `mode: "range"` e valor esperado `{start,end}`. 2. Validacao de distancia nao dispara. Correcao: configurar `minDistance`/`maxDistance` com numeros validos. 3. Campos extras de inline/rating nao fazem efeito. Correcao: esses campos pertencem ao contrato amplo, mas nao sao usados neste renderer. 4. `readonly` nao bloqueia interacao. Correcao: usar `metadata.readonly`, `readonlyMode` ou `presentationMode`; o runtime bloqueia thumbs e superficie de ponteiro e expoe `aria-readonly`. 5. Mensagem de erro generica aparece. Correcao: preencher `validators.rangeMessage/distanceMessage/minMessage/maxMessage`. 6. `step: null` ainda nao restringe selecao apenas aos marks. Correcao: use `step` numerico enquanto o modo mark-restricted nao for implementado. ### 8. Cross-links - `projects/praxis-dynamic-fields/src/lib/components/material-slider/pdx-material-slider.json-api.md` - `projects/praxis-dynamic-fields/src/lib/base/pdx-base-input-runtime-contract.json-api.md` ### 9. Relatorio de Validacao Estrutural - Visao geral: PASS - API (inputs/outputs): PASS - Cobertura JSON completa (especifico + herdado): PASS - Mapeamento de comportamento: PASS - Exemplo minimo: PASS - Exemplo corporativo: PASS - Troubleshooting: PASS ## JSON path index (obrigatorio) | Path | Type | Required | Default | Status | Notes | | ------------------------------------- | -------------------------- | -------- | ------- | ------- | --------------------------- | | `metadata` | object | true | n/a | Partial | See Detailed API reference. | | `readonlyMode` | boolean | false | n/a | Partial | See Detailed API reference. | | `disabledMode` | boolean | false | n/a | Partial | See Detailed API reference. | | `visible` | boolean | false | n/a | Partial | See Detailed API reference. | | `presentationMode` | boolean | false | n/a | Partial | See Detailed API reference. | | `metadata.controlType` | string | false | n/a | Partial | See Detailed API reference. | | `metadata.mode` | string | false | n/a | Partial | See Detailed API reference. | | `metadata.min` | number | false | n/a | Partial | See Detailed API reference. | | `metadata.max` | number | false | n/a | Partial | See Detailed API reference. | | `metadata.step` | number | false | n/a | Partial | See Detailed API reference. | | `metadata.showTicks` | boolean | false | n/a | Partial | See Detailed API reference. | | `metadata.discrete` | boolean | false | n/a | Partial | See Detailed API reference. | | `metadata.displayWith` | unknown | false | n/a | Partial | See Detailed API reference. | | `metadata.valueLabelDisplay` | string | false | n/a | Partial | See Detailed API reference. | | `metadata.valueLabelFormat` | string | false | n/a | Partial | See Detailed API reference. | | `metadata.marks` | boolean \| array \| string | false | n/a | Partial | See Detailed API reference. | | `metadata.semanticBands` | array \| string | false | n/a | Partial | See Detailed API reference. | | `metadata.distribution` | array \| object \| string | false | n/a | Partial | See Detailed API reference. | | `metadata.track` | string | false | n/a | Partial | See Detailed API reference. | | `metadata.size` | string | false | n/a | Partial | See Detailed API reference. | | `metadata.scale` | string | false | n/a | Partial | See Detailed API reference. | | `metadata.showInputs` | boolean | false | n/a | Partial | See Detailed API reference. | | `metadata.minDistance` | number | false | n/a | Partial | See Detailed API reference. | | `metadata.maxDistance` | number | false | n/a | Partial | See Detailed API reference. | | `metadata.validators.minMessage` | string | false | n/a | Partial | See Detailed API reference. | | `metadata.validators.maxMessage` | string | false | n/a | Partial | See Detailed API reference. | | `metadata.validators.rangeMessage` | string | false | n/a | Partial | See Detailed API reference. | | `metadata.validators.distanceMessage` | string | false | n/a | Partial | See Detailed API reference. | ## Events reference (obrigatorio) | Event | Payload | Trigger | Stability | Notes | | -------------- | ------- | ------------- | ------------ | --------------------------------------- | | `valueChange` | unknown | runtime-event | Experimental | Check component/runtime implementation. | | `focusChange` | unknown | runtime-event | Experimental | Check component/runtime implementation. | | `nativeBlur` | unknown | runtime-event | Experimental | Check component/runtime implementation. | | `nativeChange` | unknown | runtime-event | Experimental | Check component/runtime implementation. | ## Styling API (obrigatorio quando aplicavel) | Token/Class | Scope | Purpose | Notes | | ------------------ | --------- | --------------------------------- | ---------------------------------------------------------------- | | `not-yet-verified` | component | Styling contract not yet verified | Use Detailed API reference for component-specific styling notes. | ## Examples (obrigatorio) | Example | Scenario | Validates | Notes | | --------------------- | ----------------------------------- | ----------------------------------------- | ------------------------------------------------------------ | | `Minimal valid` | baseline payload | required contract blocks | Extracted from preserved technical reference when available. | | `Common setup` | common component usage | standard runtime behavior | Validate against host integration path. | | `Advanced setup` | richer config with overrides | precedence and normalization | Requires runtime confirmation for edge cases. | | `Enterprise scenario` | governance/legacy/migration context | auditability and compatibility boundaries | Include tenant-specific constraints when applicable. | ### Minimal valid ```json { "componentId": "pdx-material-range-slider", "metadata": { "name": "temperature", "label": "Temperatura", "controlType": "rangeSlider", "mode": "single", "min": 0, "max": 100, "step": 1 }, "readonlyMode": false } ``` ### Common setup ```json { "componentId": "pdx-material-range-slider", "metadata": { "name": "approvedRange", "label": "Faixa Aprovada", "controlType": "rangeSlider", "mode": "range", "min": 0, "max": 100000, "step": 100, "showTicks": true, "valueLabelDisplay": "on", "valueLabelFormat": "compact", "marks": [ { "value": 0, "label": "Min" }, { "value": 50000, "label": "Meta", "tone": "info" }, { "value": 100000, "label": "Max" } ], "showInputs": true, "minDistance": 1000, "maxDistance": 50000, "validators": { "rangeMessage": "Inicio deve ser menor ou igual ao fim.", "distanceMessage": "Distancia fora da faixa permitida." }, "hint": "Defina a faixa financeira autorizada.", "thumbLabel": true } } ``` ### Advanced setup ```json { "componentId": "pdx-material-range-slider", "metadata": { "name": "approvedRange", "label": "Faixa Aprovada", "controlType": "rangeSlider", "mode": "range", "min": 5, "max": 100000, "step": 100, "showTicks": true, "discrete": true, "showInputs": true, "minDistance": 1000, "maxDistance": 50000, "validators": { "rangeMessage": "Inicio deve ser menor ou igual ao fim.", "distanceMessage": "Distancia fora da faixa permitida." }, "hint": "Defina a faixa financeira autorizada." }, "readonlyMode": false, "disabledMode": false } ``` ### Enterprise scenario ```json { "componentId": "pdx-material-range-slider", "metadata": { "name": "approvedRange", "label": "Faixa Aprovada", "controlType": "rangeSlider", "mode": "range", "min": 0, "max": 100000, "step": 100, "showTicks": true, "discrete": true, "showInputs": true, "minDistance": 1000, "maxDistance": 50000, "validators": { "rangeMessage": "Inicio deve ser menor ou igual ao fim.", "distanceMessage": "Distancia fora da faixa permitida." }, "hint": "Defina a faixa financeira autorizada." }, "presentationMode": true, "visible": true } ``` ## Compatibility and migration notes (recomendado) | Concern | Affected versions | Migration action | Deadline | Notes | | ------------------------------------------- | ----------------- | ------------------------------------------------ | -------- | ----------------------------------------------------- | | No legacy path detected in current revision | n/a | No migration action required for canonical paths | n/a | Re-evaluate if backward-compat aliases are introduced | ## Known limitations and mismatches (recomendado) | Path/Behavior | Observed behavior (runtime) | Desired behavior | Impact | Tracking issue | Target fix | | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ------ | -------------- | ------------------------- | | Canonical contract parity | No confirmed mismatch in this revision; runtime linkage verified for core flows (2026-03-06), with editor/tooling coverage pending | Keep runtime/schema/editor alignment evidence updated | Low | n/a | Monitor in periodic audit | ## Source references (obrigatorio) | Source type | Path/URL | Why it is source of truth | Last verified (YYYY-MM-DD) | Notes | | --------------- | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------- | -------------------------- | ------------- | | schema-metadata | projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.metadata.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path | | runtime-code | projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.component.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path | | runtime-code | projects/praxis-dynamic-fields/src/lib/components/material-range-slider/material-range-slider.component.html | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path | | runtime-code | projects/praxis-dynamic-fields/src/lib/base/simple-base-input.component.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path | | schema-types | projects/praxis-core/src/lib/models/material-field-metadata.interface.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path |