Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open Beginner friendly
  • Is something wrong?
#36,927 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
76/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript, web-dev
Domain
frontend, full-stack

Research direction

Find the fluent-slider implementation and its form value setup, especially initialValueChanged() and setupDefaultValue() described in the issue. Trace how the initial value attribute is handled before connection and compare it with the native range input behavior. Reproduce with the linked example and verify that FormData includes level before the slider is moved.

Written by the indexing model from the issue text.

Description

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.
Dominant language
TypeScript
Stars
20.3k
Forks
2.9k
Avg merge
2d 6h
Merged PRs (30d)
53

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

  • No Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/fluentui

All issues in microsoft/fluentui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.