The slider allows users to choose a value defined in a fixed range. ZK's slider component comes in different "molds" where each mold gives a distinctive look and feel. For instance, the "scale" mold renders the slider handle as a needle and its bar metered.

<zk>
	<hlayout>
		<groupbox mold="3d" width="220px" height="300px" closable="false">
			<caption id="cap" label="Default" />
			<slider id="slider" width="150px" onScroll="zoom(self, img)"/>
			<separator />
			<image id="img" src="/widgets/input/slider/img/sun.jpg" width="10px" />
		</groupbox>
		<separator/>
		<groupbox mold="3d" width="220px" height="300px" closable="false">
			<caption label="Vertical Slider Sync" />
			<slider id="slider21" mold="sphere" width="150px"
				onScroll="zoom(self, img2);syncs(self);" />
			<separator />
			<hlayout width="190px">
				<div width="150px">
					<image id="img2" src="/widgets/input/slider/img/sun.jpg" width="10px" />
				</div>
				<slider id="slider22" mold="sphere" orient="vertical"
						height="205px" width="30px"
						onScroll="zoom(self, img2);syncs(self);" />
			</hlayout>
		</groupbox>
	</hlayout>
	<zscript><![CDATA[
		void syncs(Slider slid) {
			if (slid == slider22) {
				slider21.setCurpos(slider22.getCurpos());
			} else {
				slider22.setCurpos(slider21.getCurpos());
			}
		}
		void zoom(Slider slider, Image img) {
			int v = slider.getCurpos();
			int w = v * 1.5 > 10 ? v * 1.5 : 10;
			img.setWidth(w + "px");
		}
	]]></zscript>
</zk>
			

<zk>
	<groupbox closable="false" sclass="z-demo-config">
		<caption>Slider Mold</caption>
		<radiogroup orient="vertical">
			<attribute name="onCheck"><![CDATA[
				slider.setMold(self.getSelectedItem().getValue());
				cap.setLabel(self.getSelectedItem().getLabel());
			]]></attribute>
			<radio label="Default" value="default" checked="true" />
			<radio label="Scale" value="scale" />
			<radio label="Sphere" value="sphere" />
		</radiogroup>
	</groupbox>
</zk>