Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#36,927 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
76/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript, web-dev
Área
frontend, full-stack

Línea de trabajo

Encuentra la implementación de fluent-slider y la configuración de su valor de formulario, especialmente initialValueChanged() y setupDefaultValue(), descritos en el issue. Rastrea cómo se gestiona el atributo inicial value antes de la conexión y compáralo con el comportamiento de un control de rango nativo. Reproduce el problema con el ejemplo enlazado y comprueba que FormData incluya level antes de mover el control deslizante.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.
Lenguaje dominante
TypeScript
Estrellas
20.3k
Forks
2.9k
Merge medio
2 d 7 h
PR fusionados (30 d)
69

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de microsoft/fluentui

Todos los issues de microsoft/fluentui

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.