[SOLVED] MultiSelectListbox with Slider

[NOTiFY]

In the Showcase, you have the MultiSelectListbox showing a list of 'categories'. When you select a 'category' a list appears of 'Group2s'. What I'd like to know is it possible to make where you have 'Group2' use a PF Slider instead?

What I want to do is select an 'ingredient' from a (dynamic) list then a slider appears (as the 'Group2') so I can allow the user to select the percentage of that 'ingredient' in the product. Adding the necessary code to a Class similar to the MultiSelectView.java example.

Rather than spend a few hours on a PoC & finding out that it's not possible, can you please give me the heads up if it's doable?

Can a type of "org.primefaces.component.slider.Slider" be added to a "javax.faces.model.SelectItemGroup"?

Thanks.

***** SOLVED *****

Found a solution by using the 'Drag and Drop' component. Dragging the selected value to a DataTable and adding the 'Slider' component as the 2nd column in the datatable.

Code: Select all

<p:dataTable id="dataTableSelectedIngredients" var="ingredient" value="#{ingredientBean.droppedIngredients}" rendered="#{not empty ingredientBean.droppedIngredients}">

		<p:column headerText="Ingredient Name" style="width:50%">
                 	<h:outputText value="#{ingredient.ingredientName}"/>
                </p:column>

                <p:column headerText="Percentage" style="width:45%">
                    	<h:outputText id="output" value="Set ratio to %#{sliderViewBean.number2}" />
                    	<h:inputHidden id="txt2" value="#{sliderViewBean.number4}" />
                    	<p:slider for="txt2" display="output" style="width: 100%" displayTemplate="Set ratio to %{value}" />
                </p:column>

                <p:column style="width:5%;align-content: center">
                    	<p:commandButton update=":tabHomeView:formIngredientDragDrop:display" oncomplete="PF('ingredientDialog').show()" icon="ui-icon-search">
                        	<f:setPropertyActionListener value="#{ingredient}" target="#{ingredientBean.selectedIngredient}"/>
                    	</p:commandButton>
                </p:column>
</p:dataTable>