Slider

The Slider data-type makes use of the jQuery UI Slider plugin; which makes selected elements into sliders. The slider can be moved with the mouse or the arrow keys.

Video Preview


Prevalue options

There are various options such as multiple handles, and ranges, these can be configured in the PreValue Editor (in the Data Types section):

Slider_PreValueEditor.PNG

Option Description
Enable Range If enabled, the slider will detect if you have two handles and create a stylable range element between these two.
Range Value If range is enabled, this drop-down list allows you to select from other possible values: 'min' and 'max'. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.
Default Value Sets the default the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.
Default Value 2 This option can be used to specify the default value of the second handle. (With range enabled there can only be 2 handles.)
Minimum Value The minimum value of the slider.
Maximum Value The maximum value of the slider.
Enable Step Increments If enabled, the slider will use step increments.
Step Increments Sets the size or amount of each interval or step the slider takes between min and max. The full specified value range of the slider (max - min) needs to be evenly divisible by the step.
Orientation This drop-down list determines the orientation of the slider, the possible values are 'horizontal' or 'vertical'. Horizontal sets the slider to have the min at the left and the max at the right, whilst vertical sets the slider to have the min at the bottom, the max at the top.

XSLT example

The Slider data-type will provide a value with either a single number or 2 (comma-separated) numbers. Here will use an example of how to display both scenarios.

<xsl:template match="/">

	<!--
		uComponents: Slider - An XSLT example
		=====================================
		The Slider data-type will provide a value with either a single number or 2 (comma-separated) numbers.
		Here will use an example of how to display both scenarios.
		In this example, the property alias name for the Slider is "slider".
	-->
	<!-- First we check that the slider has a value -->
	<xsl:if test="$currentPage/slider != ''">

		<p>

			<!-- If so, then we can prefix the value(s) with a label -->
			<xsl:text>The price is </xsl:text>

			<xsl:choose>

				<!-- Check if value contains a comma - making the assumption there are 2 values -->
				<xsl:when test="contains($currentPage/slider, ',')">

					<!-- Use the umbraco.library to split the comma-separated values -->
					<xsl:variable name="sliderValues" select="umbraco.library:Split($currentPage/slider, ',')" />

					<xsl:text>between $</xsl:text>
					<xsl:value-of select="$sliderValues/value[1]"/>
					<xsl:text> and $</xsl:text>
					<xsl:value-of select="$sliderValues/value[2]"/>

				</xsl:when>

				<!-- Otherwise we assume that the value is a single number -->
				<xsl:otherwise>

					<xsl:text>$</xsl:text>
					<xsl:value-of select="$currentPage/slider" />

				</xsl:otherwise>

			</xsl:choose>

		</p>
			
		<!-- An alternative 'quick-n-dirty' soltion is to do a string replace on the comma -->
		<p>
			<xsl:text>The prices start from $</xsl:text>
			<xsl:value-of select="umbraco.library:Replace($currentPage/slider, ',', ' to $')" />
		</p>

	</xsl:if>

</xsl:template>

Last edited Feb 20, 2012 at 12:11 AM by leekelleher, version 11