showcase example ajax:-> ajax.Advanced.xhtml
use the following markup:-
{code}
         <ace:panel id="ajaxAdvancedSettings" header="Settings" style="width: 100%;">
                <h:panelGrid width="60%" columns="1" cellpadding="20" cellspacing="20">
<ace:radioButtons id="radioButton" header="Update values: "
value="#{ajaxAdvancedBean.event}">
<ace:ajax render="ajaxAdvancedSlider" />
<f:selectItem itemLabel="after releasing handle" itemValue="slideEnd" />
<f:selectItem itemLabel="as the handle is moved" itemValue="slide" />
</ace:radioButtons>
<ace:checkboxButton id="updateCelsius" value="#{ajaxAdvancedBean.updateCelsius}"
label="Update Celsius value: " labelPosition="left">
<ace:ajax render="ajaxAdvancedSlider" />
</ace:checkboxButton>
<ace:checkboxButton id="updateFahrenheit" label="Update Fahrenheit value: "
labelPosition="left"
value="#{ajaxAdvancedBean.updateFahrenheit}">
<f:ajax render="ajaxAdvancedSlider" />
</ace:checkboxButton>
<ace:checkboxButton id="updateKelvin" label="Update Kelvin value: "
labelPosition="left"
value="#{ajaxAdvancedBean.updateKelvin}">
<f:ajax render="ajaxAdvancedSlider" />
</ace:checkboxButton>
</h:panelGrid>
            </ace:panel>
{code}

see attached screen shot for rendering alignment problem