How To:

[sp4rt4n029]

How do we retrieve the current value from the inputNumberSlider?

I need to carry out specific action based on the current value of the slider.

Here's the slider def:

 <rich:inputNumberSlider width="500" step="20"
 onchange="someFunctionCall()"
 minValue="0"
 maxValue="500"
 value="0"
 showInput="false"
 showToolTip="false"
 showBoundaryValues="false"/>

thanks for the help

[max.katz]

You need to bind the spinner to a managed bean property:

<rich:inputNumberSlider width="500" step="20"
 onchange="someFunctionCall()"
 minValue="0"
 maxValue="500"
 value="#{myBean.count}"
 showInput="false"
 showToolTip="false"
 showBoundaryValues="false"/>

In the action (navigation) method you will have access to this value.

[sergeysmirnov]

You try to use the component in non jsf way I guess.

the value attribute is a key. You have to use something like value="#{mybean.bar}" to value binding with something your can use on the server side when the data is submitted.
This is similar to what your can do with the standard h:inputText component

Is is about the JSF way.

OR, do you mean that you are asking about the way how you can reach the value of the component on the client side keeping in mind you undestand this will be void on the server side then?

[sergeysmirnov]

Just is case my guess is right:

To catch the value of the inputNumberSlider from the javascript you can use the following approach:

<rich:inputNumberSlider width="500" step="20"
 onchange="someFunctionCall(this.input.value)"
 minValue="0"
 maxValue="500"
 value="0"
 showInput="false"
 showToolTip="false"
 showBoundaryValues="false"/>
....

<script>
function someFunctionCall(value) {
 alert(value);
}
</script>

[sp4rt4n029]

"SergeySmirnov" wrote:
Just is case my guess is right:

To catch the value of the inputNumberSlider from the javascript you can use the following approach:

<rich:inputNumberSlider width="500" step="20"
 onchange="someFunctionCall(this.input.value)"
 minValue="0"
 maxValue="500"
 value="0"
 showInput="false"
 showToolTip="false"
 showBoundaryValues="false"/>
....

<script>
function someFunctionCall(value) {
 alert(value);
}
</script>

Thanks Sergey, this worked well. Sorry I didn't explain my question clearly enough.

One more thing, the slider does not fire the "onchange" event until the mouse is released, is there a way to invoke onchange event without having to lift the mouse? "onmousemove" does not seem to accept "this.input.value".

Also, does 'valueChangeListener' invokes a JS function?

Sorry for too many questions. Today's my first day with rich faces and the documentation on TLD blows.

Thanks

[nbelaevski]

valueChangeListener is a standard UIInput listener for input change. It is server-side and is actually EL-binding to method having single javax.faces.event.ValueChangeEvent type argument and returning void.

We currently do not have continous change events for slider. Only the one that's fired when you release the track.

[sergeysmirnov]

I suggest that changing something while dragging is a possible use case and we should support it in the future.

However, right now, you can use the following workaround:

....
<a4j:loadStyle src="resource:///org/ajax4jsf/framework/resource/scripts/prototype.js" />
...

rich:inputNumberSlider width="500" step="20"
 onchange="someFunctionCall(this.input.value)"
 onmousemove=someFunctionCall (this.getElementsByTagName('input')[0].value)"
 minValue="0"
 maxValue="500"
 value="0"
 showInput="false"
 showToolTip="false"
 showBoundaryValues="false"/>
....

<script>
function someFunctionCall(value) {
 alert(value);
}
</script>

Pay attention that you still need the onchange, because user might not only drag, but click to change the value