How to bind spinner input value with a slider in primefaces

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
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum