🐛 Bug Report
<fluent-slider> emits a change event whenever its value changes, including changes made programmatically through the value attribute or property. Consumers cannot initialize or synchronize the slider value without triggering handlers intended for user interaction.
💻 Repro or Code Sample
<fluent-slider></fluent-slider>
<script type="module">
import "@fluentui/web-components/slider/define.js";
await customElements.whenDefined("fluent-slider");
const slider = document.querySelector("fluent-slider");
await new Promise(resolve => requestAnimationFrame(resolve));
let changeCount = 0;
slider.addEventListener("change", () => {
changeCount++;
});
slider.setAttribute("value", "25");
console.log(changeCount); // Actual: 1; expected: 0
slider.value = "50";
console.log(changeCount); // Actual: 2; expected: 0
</script>
🤔 Expected Behavior
Programmatically changing the value attribute or property should update the slider position, form value, and ARIA state without emitting a change event.
A change event should be emitted only in response to user interaction. The value attribute should update the current value only while the control is in a clean state.
😯 Current Behavior
The connected slider's initialValueChanged() callback assigns the new initial value through the value setter. That setter unconditionally calls $emit("change").
Direct property assignments, attribute updates, form resets, and internal value normalization therefore emit the same event as pointer or keyboard interaction.
💁 Possible Solution
Track an internal dirty-value state, following the patterns used by components such as text input, checkbox, and radio group.
Move change event dispatching out of the generic value setter and into user-interaction paths. Use the dirty state to control whether initialValueChanged() synchronizes the current value, and clear it during form reset.
🔦 Context
Applications commonly use change to distinguish user edits from programmatic initialization or controlled-state synchronization. The current behavior can cause duplicate updates, feedback loops, and initialization being treated as user input.
🌍 Your Environment
- OS & Device: macOS 26.6.2 on Mac
- Browser: Google Chrome 152.0.7977.83
- Version:
@fluentui/web-components 3.1.2
🐛 Bug Report
<fluent-slider>emits achangeevent whenever its value changes, including changes made programmatically through thevalueattribute or property. Consumers cannot initialize or synchronize the slider value without triggering handlers intended for user interaction.💻 Repro or Code Sample
🤔 Expected Behavior
Programmatically changing the
valueattribute or property should update the slider position, form value, and ARIA state without emitting achangeevent.A
changeevent should be emitted only in response to user interaction. Thevalueattribute should update the current value only while the control is in a clean state.😯 Current Behavior
The connected slider's
initialValueChanged()callback assigns the new initial value through thevaluesetter. That setter unconditionally calls$emit("change").Direct property assignments, attribute updates, form resets, and internal value normalization therefore emit the same event as pointer or keyboard interaction.
💁 Possible Solution
Track an internal dirty-value state, following the patterns used by components such as text input, checkbox, and radio group.
Move
changeevent dispatching out of the genericvaluesetter and into user-interaction paths. Use the dirty state to control whetherinitialValueChanged()synchronizes the current value, and clear it during form reset.🔦 Context
Applications commonly use
changeto distinguish user edits from programmatic initialization or controlled-state synchronization. The current behavior can cause duplicate updates, feedback loops, and initialization being treated as user input.🌍 Your Environment
@fluentui/web-components3.1.2