CODEWITHSUNDEEP
jsf-2primefacesslider
Wanna Coffee
Wanna Coffee

Reputation: 2798

How to get non-integer value from <p:slider>

I am trying to get Float value from primefaces slider. But, it seems does't support Non Integer value.

I have try by setting step - attribute, no improvement.

Here is my JSF code:

<h:panelGrid>
    <h:panelGrid columns="2" style="margin-bottom:10px">
    <p:outputLabel value="Interest Rate : "/>
    <p:inputText id="intVal" value="#{primeSlider.interest}">
      <f:convertNumber minFractionDigits="2" />
    </p:inputText>

    </h:panelGrid>  

    <p:slider id="interestSlider" for="intVal" minValue="5" maxValue="25" step="1" style="width:500px;" />
</h:panelGrid>

It is possible to get Non-Integer value like float,double from primefaces slider?

If so, How to do that?

Upvotes: 3

Views: 2417

Answers (1)

Daniel Teleginski Camargo
Daniel Teleginski Camargo

Reputation: 4423

It's not that complicated to handle the slider yourself. Check this sample code:

<h:form id="form">          
    <h:panelGrid>
        <p:inputText id="intVal" value="#{primeSlider.interest}" widgetVar="iVar">
            <f:convertNumber minFractionDigits="2" />
        </p:inputText>
        <div id="slider"></div>
        <script>
            $(function() {
                jQuery("#slider").slider({
                    range: "min",
                    value: 37,
                    step: 0.25,
                    min: 1,
                    max: 700,
                    slide: function(event, ui) {
                        jQuery(iVar.jqId).val(ui.value);
                    }
                });
                jQuery(iVar.jqId).val(jQuery("#slider").slider("value"));
            });
        </script>

        <p:commandButton value="Send" />
    </h:panelGrid>
    <p:outputPanel autoUpdate="true">
        #{primeSlider.interest}
    </p:outputPanel>
</h:form>

Upvotes: 2

Related Questions