Primefaces 7 <p:slider> UI glitch issue with <p:ajax> - ajax

Question

Context:
We are migrating our project from Axon Ivy 6.3 to Axon Ivy 8. In Axon Ivy 6.3, we use Primefaces 6, and in Axon Ivy 8, we use Primefaces 7.
We have our project with Axon Ivy 6.3 running on our staging server, the glitch issue doesn't happen there. However, on our dev server, where the Axon Ivy project version 8 is running, the issue happens.
So I guess it has something to do with the version of Primefaces.
Here is some of the code that we're using, I hope this can provide enough information.
We have custom numberSlider component, which contains an input field and a <p:slider>.
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:cc="http://xmlns.jcp.org/jsf/composite"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<cc:interface>
<cc:attribute name="value" required="true"/>
<cc:attribute name="componentId" required="true" type="java.lang.String"/>
<cc:attribute name="minValue" default="0"/>
<cc:attribute name="maxValue" default="100"/>
<cc:attribute name="step" default="1"/>
<cc:attribute name="label" type="java.lang.String"/>
<cc:attribute name="inputStyleClass" type="java.lang.String"/>
<cc:attribute name="widgetVar" type="java.lang.String"/>
<cc:editableValueHolder name="input" targets="#{cc.attrs.componentId}Input" />
<cc:clientBehavior name="slideEnd" targets="#{cc.attrs.componentId}Slider" event="slideEnd" />
<cc:clientBehavior name="inputChange" targets="#{cc.attrs.componentId}Input" event="change" />
</cc:interface>
<cc:implementation>
<h:outputScript name="numberslider.js?v=#{cachedVersion}" library="js" target="head"/>
<h:outputStylesheet library="css" name="componentnumber.slider.min.css?v=#{cachedVersion}"/>
<p:outputLabel value="#{cc.attrs.label}" for="#{cc.attrs.componentId}Input" styleClass="c-blue label"/>
<p:inputNumber id="#{cc.attrs.componentId}Input" value="#{cc.attrs.value}"
styleClass="input #{cc.attrs.inputStyleClass}" decimalPlaces="0" thousandSeparator="'" minValue="0" maxValue="2000000">
</p:inputNumber>
<p:message for="#{cc.attrs.componentId}Input" id="#{cc.attrs.componentId}InputMessage"/>
<div class="spacing-small"></div>
<div class="range">
<p:outputPanel styleClass="slider__tooltipBlock">
<i class="arrow-up"></i>
<p:outputLabel styleClass="slider__tooltipLabel" id="#{cc.attrs.componentId}SliderTooltipLabel" value="#{cc.attrs.value}">
<f:convertNumber type="number" locale="de_CH"/>
</p:outputLabel>
</p:outputPanel>
<p:slider id="#{cc.attrs.componentId}Slider" widgetVar="#{cc.attrs.widgetVar}" styleClass="slider__line"
for="#{cc.attrs.componentId}Input"
step="#{cc.attrs.step}" maxValue="#{cc.attrs.maxValue}" minValue="#{cc.attrs.minValue}"
display="#{cc.attrs.componentId}SliderTooltipLabel">
</p:slider>
<script type="text/javascript">
$(document).ready(function(){
MF.component.numberSlider.initSliderToolTip('#{cc.attrs.widgetVar}');
})
</script>
</div>
</cc:implementation>
</ui:composition>
And this is the way we use that component:
<div class="column medium-6">
<com:numberSlider id="amount" componentId="amount" value="#{tranche.amount}"
label="#{ivy.cms.co('/xx/xxx/xxx/xx/component/product/tranches/amount')}"
minValue="0" maxValue="2000000" step="50000" widgetVar="amountSlider#{varStatus.index}">
<p:ajax event="inputChange" listener="#{logic.onInputChange(varStatus.index)}"
partialSubmit="true"
update="#([id$='productVariant']) #([id$='flexibilityPanel']) #([id$='houseOverlayDataVariant']) #([id$='houseOverlayData'])"
process="#([id$='productVariant'])"
oncomplete="updateProductPageElementsHeight(); bindEventListenerForRangeSlider(); bindEventListenerForToogleHouse();"/>
<p:ajax event="slideEnd" listener="#{logic.onInputChange(varStatus.index)}"
partialSubmit="true"
update="#([id$='productVariant']) #([id$='flexibilityPanel']) #([id$='houseOverlayDataVariant']) #([id$='houseOverlayData'])"
process="#([id$='productVariant'])"
oncomplete="updateProductPageElementsHeight(); bindEventListenerForRangeSlider(); bindEventListenerForToogleHouse()"/>
</com:numberSlider>
</div>
Behavior
When we drag and drop the slider on staging, then release the mouse, the UI is updated smoothly.
When we drag and drop the slider on dev, then release the mouse, the UI has one glitch, the slider disappears and then reappears quickly. Some CSS has not been applied first when the glitch happens, then when the slider appears again, the CSS then applied correctly.
I expect the UI get changed the same way on both two versions.
I've checked the rendered html code for both version, and I don't know why they're different.
Primefaces 6 rendered html:
<div class="column medium-6">
<label id="j_id_h4:j_id_h7:j_id_l2:0:amount:j_id_li" class="ui-outputlabel ui-widget c-blue label" for="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_input">Höhe</label><span id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput" class="ui-inputNum ui-widget input "><input id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_input" name="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_input" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all pe-inputNumber" role="textbox" aria-disabled="false" aria-readonly="false"><input id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_hinput" name="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_hinput" type="hidden" autocomplete="off" value="1050000"></span>
<div id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInputMessage" aria-live="polite" data-display="both" data-target="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput" data-redisplay="true" class="ui-message"></div>
<div class="spacing-small"></div>
<div class="range">
<div id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountSlider" class="slider__line ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 52.5%;">
<div id="j_id_h4:j_id_h7:j_id_l2:0:amount:j_id_lm" class="ui-outputpanel ui-widget slider__tooltipBlock">
<i class="arrow-up"></i><label id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountSliderTooltipLabel" class="ui-outputlabel ui-widget slider__tooltipLabel">1'050'000</label>
</div>
</span>
</div>
<script type="text/javascript">
$(document).ready(function(){
MF.component.numberSlider.initSliderToolTip('amountWidgetVar');
})
</script>
</div>
</div>
Primefaces 7 rendered html
<div class="column medium-6">
<label id="j_id_h4:j_id_h7:j_id_kn:0:amount:j_id_l3" class="ui-outputlabel ui-widget c-blue label" for="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_input">Höhe</label><span id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput" class="ui-inputnumber ui-widget input "><input id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_input" name="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_input" type="text" value="1100000" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" aria-labelledby="j_id_h4:j_id_h7:j_id_kn:0:amount:j_id_l3" onchange="PrimeFaces.ab({s:"j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput",e:"change",f:"mainForm",p:"#([id$='productVariant'])",u:"#([id$='productVariant']) #([id$='flexibilityPanel']) #([id$='houseOverlayDataVariant']) #([id$='houseOverlayData'])",ps:true,onco:function(xhr,status,args){updateProductPageElementsHeight(); bindEventListenerForRangeSlider(); bindEventListenerForToogleHouse();;}});" data-p-label="Höhe" data-p-con="javax.faces.Integer" data-p-hl="inputnumber" role="textbox" aria-disabled="false" aria-readonly="false"><input id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_hinput" name="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_hinput" type="hidden" autocomplete="off" data-p-label="Höhe" data-p-con="javax.faces.Integer" data-p-hl="inputnumber" value="1100000"></span>
<div id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInputMessage" aria-live="polite" data-display="both" data-target="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput" data-redisplay="true" class="ui-message"></div>
<div class="spacing-small"></div>
<div class="range">
<div id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountSlider" class="slider__line ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
<span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 55%;">
<div id="j_id_h4:j_id_h7:j_id_kn:0:amount:j_id_l7" class="ui-outputpanel ui-widget slider__tooltipBlock">
<i class="arrow-up"></i><label id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountSliderTooltipLabel" class="ui-outputlabel ui-widget slider__tooltipLabel">1'100'000</label>
</div>
</span>
</diva>
<script type="text/javascript">
$(document).ready(function(){
MF.component.numberSlider.initSliderToolTip('amountSlider0');
})
</script>
</div>
</div>
Pimefaces 6 renders the html without the onchange part.