Introduction

In some of the use cases it is convenient for users to select a value or a range by dragging a handle, and the  Slider component has been provided for this purpose.

Now, instead of having to use multiple sliders to choose multiple values, we are glad to introduce two new components in ZK 9 – Rangeslider and Multislider. The rangeslider and the multislider components represent slider with one or several pair(s) of values. They can be used for selecting one or multiple ranges.

Demo


The ZUL file used in this demo is as below:

ZUL

<zk>
   <vlayout>
      <rangeslider min="10" max="150" startValue="25" endValue="110"/>
      <rangeslider id="r2" startValue="10" endValue="70" tooltipVisible="true"/>
      <multislider>
         <sliderbuttons startValue="10" endValue="70"/>
         <sliderbuttons startValue="25" endValue="55"/>
      </multislider>
      <multislider id="m2">
         <sliderbuttons startValue="13" endValue="83"/>
         <sliderbuttons startValue="24" endValue="72"/>
         <sliderbuttons startValue="36" endValue="61"/>
      </multislider>
   </vlayout>
   <zscript><![CDATA[
        import java.util.Map;
        import java.util.HashMap;
        Map marksInfo = new HashMap();
        marksInfo.put(0, "0%");
        marksInfo.put(20, "20%");
        marksInfo.put(50, "50%");
        marksInfo.put(80, "80%");
        marksInfo.put(100, "100%");
        r2.setMarkScale(0);
        r2.setMarks(marksInfo);
        m2.setMarkScale(0);
        m2.setMarks(marksInfo);
    ]]></zscript>
</zk>

Rangeslider and Multislider Properties

We provide several API methods for the rangeslider and multislider (the following methods exist in both rangeslider and multislider):

  • setOrient(String)
    Sets the marks information for displaying value marks. It supports Map<Interge, String>. The key is represented as the value of the slider, and the value is represented as the displayed mark label. It means that you can specify each value mark differently.
  • setMin(int) and setMax
    Minimal and Maximal value of the slider. (Default: 0, 100)
  • setModel(ListModel<E>)
    Sets the tree model associated with this slider.
  • setStep(int)
    By default, rangeslider/multislider will scroll to the position continuously when a user drags it. If you prefer to scroll at a discrete fixed amount (e.g. every 10), you can set the amount in the step property.
  • setTooltipVisible(boolean)
    The tooltip displays the value of slider buttons in rangeslider/multislider. If the tooltipvisible is true, the tooltips of the slider buttons would always be visible. (Default: false)

Properties about representing range value

We provide several API methods / events to handle the range value (in Rangeslider and Sliderbuttons):

  • setStartValue(int), setEndValue(int)
    Represent the range value. (Default: 0).
  • onRangeValueChange
    Represents a range value change event caused by the user.

This component will be available in ZK 9.0. You can already try them out using the 9.0 RC and freshly (nightly) builds. I hope you find this component interesting. Please let us know how you like it!

For further information, please check out component reference – Rangesider, component reference – Multislider and component reference – Sliderbuttons.

Downloads

The runnable demo project is available on Github – Rangeslider Demo and Github – Multislider Demo.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Leave a Reply