Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Bug]: fluent-slider initial value is not submitted with the form

Aperta Adatta ai principianti
  • Qualcosa non va?
#36,927 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
76/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
typescript, web-dev
Ambito
frontend, full-stack

Direzione di ricerca

Trova l’implementazione di fluent-slider e la configurazione del suo valore del modulo, in particolare initialValueChanged() e setupDefaultValue() descritte nell’issue. Segui come viene gestito l’attributo value iniziale prima della connessione e confrontalo con il comportamento di un input range nativo. Riproduci il problema con l’esempio collegato e verifica che FormData includa level prima che lo slider venga spostato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Component

Slider

Package version

3.1.3

@microsoft/fast-element version

3.0.4

Environment
OS: Windows 11
Browsers: Microsoft Edge 155 (Chromium 155)
npmPackages:
  @fluentui/web-components: 3.1.3
  @microsoft/fast-element: 3.0.4
Current Behavior

When <fluent-slider> is rendered with a value attribute (e.g. server-rendered HTML), slider.value returns that value, but the form value is never set. The slider is missing from the submitted form data until its value is changed.

The value attribute is applied before the element is connected, so initialValueChanged only sets _value. Then setupDefaultValue() skips the value setter because _value is already set, so setFormValue() is never called:

setupDefaultValue() {
    if (!this._value) {
        this.value = this.initialValue ?? this.midpoint;
    }
    // ...
}
Expected Behavior

The initial value is submitted with the form, like <input type="range" value="7">.

Reproduction

https://oonoobmasteroo.github.io/fluent-slider-form-value/ (source: https://github.com/oONoobMasterOo/fluent-slider-form-value)

Steps to reproduce
  1. Open the reproduction:
<form id="form">
  <fluent-slider name="level" min="0" max="10" value="7"></fluent-slider>
  <input name="native" type="range" min="0" max="10" value="7">
  <button type="button" id="check">Show FormData</button>
</form>
<pre id="out"></pre>

<script type="module">
  import "https://cdn.jsdelivr.net/npm/@fluentui/[email protected]/dist/web-components.min.js";

  document.getElementById("check").addEventListener("click", () => {
    const slider = document.querySelector("fluent-slider");
    const data = Object.fromEntries(new FormData(document.getElementById("form")));
    document.getElementById("out").textContent = JSON.stringify({ sliderValue: slider.value, formData: data }, null, 2);
  });
</script>
  1. Click Show FormData.
  2. sliderValue is "7", but formData only contains native: { "native": "7" }.
  3. Move the slider (or set slider.value from script) and click again: level is now in formData.
Are you reporting an Accessibility issue?

no

Suggested severity

Medium - Has workaround

Products/sites affected

Fluent UI Blazor (FluentSlider in statically rendered forms)

Are you willing to submit a PR to fix?

yes

Validations
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
Lingua principale
TypeScript
Stelle
20.3k
Fork
2.9k
Merge medio
2g 6h
PR unite (30g)
53

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/fluentui

Tutte le issue di microsoft/fluentui

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.