Primefaces range slider max and min values

Question

I need to know from which element is the value that I get in the event from a range slider. I have the following code:

<h:outputText id="displayValues" value="#{myBean.min} - #{myBean.max}"/>
<p:slider
  id="mySlider"
  for="min,max"
  display="displayValues"
  range="true"
  displayTemplate=" {min} - {max}" 
  minValue="#{myBean.value1}"  
  maxValue="#{myBean.value2}" >
  <p:ajax event="slideEnd" listener="#{simuladorBean.onSlideEnd}"/>
</p:slider>
<h:inputHidden id="min" value="#{myBean.min}"/>
<h:inputHidden id="max" value="#{myBean.max}" />

In myBean with event.getValue(), I know the new value from the slider that I move, but I need to know if this new value is from max or min slider. can someone help me to solve this.

Thanks

score 2 · Accepted Answer · answered Apr 03 '18 at 13:33

Normally, when a form is submitted, the inputHidden max and min are also submitted. But due to you using p:ajax on the slider and since the default process of a p:ajax is @this, the inputHidden fields are not submitted. If you change the p:ajax to

<p:ajax event="slideEnd" process="@this, min, max" listener="#{simuladorBean.onSlideEnd}"/>

(or by wrapping the whole xhtml block above in a container and processing that)

The min and max are submitted and in the onSlideEnd you can compare the value you get in the event with the min and max and determine which one changed.

See also

Thanks a lot, yesterday I try only with process="@this" and process="min, max" following some examples but I dont see the change in the variables, I never tried process="@this, min, max" — mf8951, Apr 03 '18 at 13:42
In next questions, please also state what you tried and preferably with links to where you found the info. See [ask]! — Kukeltje, Apr 03 '18 at 13:45

score 0 · Answer 2 · answered May 20 '18 at 14:20

I have similar need and I implement this simple solution : I create this function

function isMinOrMaxRangeFocus() {
                        if ($($('#sliderId .ui-slider-handle')[0]).hasClass('ui-state-focus')) return 'min';
                        if ($($('#sliderId .ui-slider-handle')[1]).hasClass('ui-state-focus')) return 'max';
                        return ('none');
                    }

And after you can use it at onstart like this :

<p:slider id="sliderId" for="sliderMin,sliderMax" range="true" >
                                        <p:ajax event="slideEnd" onstart="$('#whichSliderIs).val(isMinOrMaxRangeFocus());" process="@this,whichSliderIs,sliderMin,sliderMax" listener="#{myBean.myListener()}" />
                                    </p:slider>
                                    <h:inputHidden id="sliderMin" value="#{myBean.sliderMin}"/>
                                    <h:inputHidden id="sliderMax" value="#{myBean.sliderMax}"/>
                                    <h:inputText id="whichSliderIs" value="#{myBean.whichSliderIs}" style="display: none"/>

Know it's very easy to know which value is changed !

Primefaces range slider max and min values

2 Answers2