I have a problem with the use of p:slider. I would like to get a background for the selected part so i decided to use a range slider because it's not possible with a basic slider.
I have 2 inputHidden with a fixed value (#{questionActivite.minValue} set to 0) and my first handler is not displayed (css display: none).
It's ok for the slideEnd event but there is a problem when i click on the background of the slider. The first handler is not displayed but is always active.
So my question is : How to disable the first handler ? Is it possible ?
My html code :
Code: Select all
<h:form class="form-group form-group-range">
<h:outputText id="marche"
value="#{questionActivite.tempsMarcheEte}"
style="float:right;font-size: 1.2em;color: #52AEB8;font-weight:700" />
<h:panelGrid columns="1" style="margin-bottom: 10px; width:100%">
<p:slider id="sliderMarcheEte" range="true"
for="marche1,marche2" step="15" maxValue="240" minValue="0"
style="width: 100%" styleClass="sliderPrev">
<p:ajax update="dataTableScore, marche" event="slideEnd"
listener="#{questionActivite.onSlideEnd}"
oncomplete="remote()" />
</p:slider>
<h:inputHidden id="marche1" value="#{questionActivite.minValue}" />
<h:inputHidden id="marche2"
value="#{questionActivite.tempsMarcheEteEnMinutes}" />
<p:remoteCommand name="remote"
actionListener="#{selectedScore.calculerScoreActivite()}"
update="colGraph, marche, dataTableScore" />
</h:panelGrid>
</h:form>
Code: Select all
.sliderPrev.ui-slider.ui-slider-horizontal {
background: #e6e6e6;
height: 10px;
}
.sliderPrev.ui-slider .ui-slider-handle {
width: 25px;
height: 25px;
top: -7px;
border-radius: 50%;
background: white;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.sliderPrev.ui-slider .ui-slider-handle:focus {
width: 25px;
height: 25px;
top: -7px;
border-radius: 50%;
background: #ccc;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
border-radius: 50%;
}
.sliderPrev span:nth-of-type(1) {
display: none !important;
}
.sliderPrev.ui-slider .ui-slider-range {
background-color: #5EC9C6;
}
Installation :
Primefaces 6.0 ; JSF 2.0 ; Wildfly 9.0.2