Rangeslider allows users to specify a range by dragging or clicking the handle.

It also allows you to configure its orientation, min/max values and whether you would like the users to scroll continuously, or scroll to a discrete fixed amount (ex. every 20).

<zk>
	<vlayout apply="demo.input.range_slider.RangeSliderComposer">
		<rangeslider startValue="35" endValue="90"/>
		<rangeslider step="20" min="0" max="120" startValue="20" endValue="60"/>
		<rangeslider id="slidermarks" />
	</vlayout>
</zk>
			

package demo.input.range_slider;

import java.util.HashMap;
import java.util.Map;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zkex.zul.Rangeslider;

public class RangeSliderComposer extends SelectorComposer {

	@Wire
	private Rangeslider slidermarks;

	@Override
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);

		Map<Integer, String> marks = new HashMap<Integer, String>();
		marks.put(20, "20%, low");
		marks.put(50, "50%, medium");
		marks.put(80, "80%, high");
		slidermarks.setMarkScale(0);
		slidermarks.setMarks(marks);
	}
}