I was implenting this example from primefaces showcase to provide Spinner Slider input, although I used the same code provided in the showcase, I faced a problem that spinner value is not synchronized with it's slider, if the value in the spinner input is e.g. 10, when I change this value with the slider to e.g 50, if I increment the spinner, I should expect value 51, but actually it gives me 11 as if it's value is independent from the slider

this is my XHTML code

<div class="card">
    <h:form>
        <p:growl id="growl" showDetail="true"/>
        <h5>Spinner Slider</h5>
        <h:panelGrid columns="1" style="margin-bottom: 10px">
            <p:spinner id="spinner1" value="#{sliderView.number3}" min="0" max="1000" stepFactor="50"
                       suffix=" €" valueChangeListener="#{sliderView.onInputChanged}">
                <p:ajax process="@this" update="growl"/>
            </p:spinner>
            <p:slider for="spinner1" minValue="0" maxValue="1000" step="50"/>
        </h:panelGrid>
    </h:form>
</div>

and sliderView.java is the same as the primefaces showcase example

here is a GIF that show an example

• Second problem, when I change the input from spinner, this doesn't change slider position, this is true even in the primefaces showcase, how to make the slider pointer change as the spinner value change