DMXzone Slider Manual

The Basics: Creating Range Selector with DMXzone Slider

In this tutorial we will show you how to create a range selector using DMXzone Sider.

*You can also check out the video.

How to do it

1. We've already created our page layout and now we'll insert the DMXzone Slider. Click on your page (1) and hit the DMXzone Slider icon (2).

2. For our tutorial we will use the default ID (1) for our Slider and will set the Initial value to 2 (2). You can leave this field blank if you want your initial value to be 0.
   
   

3. We'll leave the length at 100%.
   
   

4. The minimal value is set at 0 (1) and the maximal we change to100 (2).

5. The DMXzone Slider orientation can be horizontal or vertical. For our tutorial we choose the horizontal one.
   
   

6. Choose one of the predefined designs by clicking on the style picker. We chose the Blitzer design.
   
   

7. To add the range selector, click on the range checkbox.

8. We leave the initial minimal value to 0 (1) and set 5 as initial maximal value (2) for our range.  

9. You can set the Min and Max value of the range selector to be fixed. In this case if you chose fixed minimum value it will be equal to the Slider min value, and if the fixed maximum is checked then the maximum range value will match the Slider max value.

10. You can also store the selected values of the range selector into hidden fields. If you like to do so, click the Add new button in order to create a new hidden field.  When you're done, click OK.
    
    

*Note: If you're using fixed min and fixed max then only the selectable value will be copied to the hidden field!

11. Now you can save your work and preview the result in the browser.