When swiping
If you select the On slide option as the Trigger, the behavior rule is applied to the shape when the user moves the mouse over the shape with the mouse button held down or swipes over it with their finger. This makes it possible to turn a shape into a slider.
In the Value field, you can configure the exact behavior of the slider with the following format:
\(D_1\) and \(D_2\) represent the definition range, i.e. the lowest and highest possible pixel value to which a user input reacts, while \(V_1\) and \(V_2\) define the value range, i.e. the minimum and maximum value that is to be written to the target object when the shape is swiped over. Finally, \(dir\) determines the direction of the slider, where only the values 0 (for horizontal sliders) and 1 (for vertical sliders) are valid. With horizontal sliders, you can also simply omit \(dir\), as it is the default value.
Example: Slider
The following example describes the correct configuration of a horizontal slider that is 200 pixels wide and converts the pixel values between 0 and 200 into values between 0 and 100 before they are written to the target object.
<g>
<rect class="slider-path"
x="0" y="0" width="200" height="20"
fill="#777" stroke="#333" stroke-width="2"></rect>
<path id="MySlideHandler"
d="M-1,3 L11,3 L11,22 L5,28 L-1,22Z"
fill="#179ce3" stroke="black"></path>
</g>
Warning
The enclosing <g> element is essential for the correct functioning of the slider.
The <rect> element contained in it acts as an active surface that reacts to user input.
For this to be possible, it is essential that the attribute class is set to the value slider-path on this element.
Ultimately, the <path> element displays the current value of the slider.
The ID of this element can be used as a target object in the behavior rules, as is illustrated in the tables below.
Slider, consisting of the shaft (background) and the actual slider (blue arrow)
Behavior rule 1
The following animation rule reacts to user input and automatically sets the live value of the data point in dependence on the current position of the mouse pointer.
Behavior |
|
|---|---|
Trigger |
On slide |
Action |
|
|---|---|
Action Type |
Set data point property |
Element |
MySlideHandler |
Property |
<LiveValue> |
Value |
0:200:0:100 |
Behavior rule 2
The following animation rule moves the slider head to the correct position as determined by the current live value of the data point.
Behavior |
|
|---|---|
Trigger |
Data point property |
Property |
<LiveValue> |
Condition |
|
|---|---|
Function |
Always |
Action |
|
|---|---|
Action Type |
Translate X |
Element |
MySlideHandler |
Value |
0:2:100 |
Please also read the related information under When clicked.