How to disable first handler in range slider

UI Components for JSF
Post Reply
bazinga
Posts: 1
Joined: 20 Sep 2017, 13:39

20 Sep 2017, 14:00

Hi all,
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>
My css code :

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;
}

Thanks,

Installation :

Primefaces 6.0 ; JSF 2.0 ; Wildfly 9.0.2

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

21 Sep 2017, 09:14

look at the javascript for the slider (the source IS open). Most likely you can (selectively) override a a function there that prevents adding drag/drop to one of the sliders

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 21 guests