INVISIBLE_PARAM_SLIDER
Active invisible element that let the user change the value of a prameter by dragging the mouse or clicking on specific keys. For more information, see User Experience. This widget is similar to the IMAGE_PARAM_SLIDER element, except that it does not display anything and does not have a thumb area.
Attributes brief detailed show all inherited
Example
Here's a very simple demo with a vertical slider using INVISIBLE_PARAM_SLIDER and WIDGET background_color for drawing.
- <!-- create demo param -->
- <PARAM id="demo_param" min="0" max="1" default="0.5" value_format="0.3" />
- <!-- vertical slider with a thumb -->
- <WIDGET background_color="#EEEEEE" layout_type="layer_stack">
- <!-- thumb rectangle -->
- <WIDGET id="v_thumb" background_color="#DD0000" width="100%" height="20" v_align="top" />
- <!-- move thumb position according to param value -->
- <PARAM_LINK from="demo_param" to="v_thumb.v_offset" formula="300-20-x*(300-20)" /> <!-- slider height minus thumb height -->
- <!-- the control that handles mouse and keyboard-->
- <INVISIBLE_PARAM_SLIDER param_id="demo_param" cursor="system::hand" width="40" height="300" />
- </WIDGET>
- <!-- text value of a param -->
- <PARAM_TEXT_CONTROL param_id="demo_param" />

Here's the same demo but for horizontal slider and positions_count set.
- <!-- create demo param -->
- <PARAM id="demo_param" min="0" max="1" default="0.5" value_format="0.3" />
- <!-- horizontal slider with a thumb -->
- <WIDGET background_color="#EEEEEE" layout_type="layer_stack">
- <!-- thumb rectangle -->
- <WIDGET id="h_thumb" background_color="#DD0000" height="100%" width="20" h_align="left" />
- <!-- move thumb position according to param value -->
- <PARAM_LINK from="demo_param" to="h_thumb.h_offset" formula="x*(300-20)" />
- <!-- the control that handles mouse and keyboard-->
- <INVISIBLE_PARAM_SLIDER param_id="demo_param" cursor="system::hand" width="300" height="40" orientation="horizontal" positions_count="7" />
- </WIDGET>
- <!-- text value of a param -->
- <PARAM_TEXT_CONTROL param_id="demo_param" />

Notice that you can't set the virtual size of the thumb in INVISIBLE_PARAM_SLIDER like with IMAGE_PARAM_SLIDER (where you can change the thumb size changing the image size).
Common use
You could use this element within a TEMPLATE to create custom slider-type controls. For drawing you could use CANVAS, or svg, or simple WIDGET background_color for filled rectangles as in the examples above.
Here's an example of createing a simple custom slider using TEMPLATE.
- <!-- create demo params -->
- <PARAM id="demo_param" min="0" max="1" default="0.5" value_format="0.3" />
- <PARAM id="demo_param2" min="0" max="1" default="0.5" value_format="0.3" />
- <!-- variable to create unique id for elements -->
- <VARIABLE id="ID_N" value="0" />
- <!-- template for a custom vertical slider -->
- <TEMPLATE id="MY_SLIDER" param_id="_" width="40" height="200" thumb_width="40" thumb_height="20" thumb_color="#FF0000" selection_color="#FFBBBB" positions_count="">
- <!-- create a unique id for each slider widget -->
- <VARIABLE id="ID_N" formula="$ID_N$+1" override="true" />
- <VARIABLE id="WIDGET_ID" value="slider_$ID_N$" />
- <!-- start the layout -->
- <WIDGET layout_type="column">
- <WIDGET background_color="#EEEEEE" layout_type="layer_stack">
- <!-- "selection" rectangle -->
- <WIDGET id="$WIDGET_ID$_selection" background_color="$selection_color$" width="$width$" height="$height$" v_align="top" />
- <!-- thumb rectangle -->
- <WIDGET id="$WIDGET_ID$_thumb" background_color="$thumb_color$" height="$thumb_height$" width="$thumb_width$" v_align="top" />
- <!-- move thumb/selection according to param value -->
- <PARAM_MULTI_LINK from="$param_id$" to="$WIDGET_ID$_thumb.v_offset;$WIDGET_ID$_selection.v_offset" formula="$height$-$thumb_height$ - x*($height$-$thumb_height$)" />
- <!-- the control that handles mouse and keyboard -->
- <INVISIBLE_PARAM_SLIDER param_id="$param_id$" cursor="system::hand" width="$width$" height="$height$" positions_count="$positions_count$" />
- </WIDGET>
- <!-- text value of a param -->
- <PARAM_TEXT_CONTROL param_id="$param_id$" />
- </WIDGET>
- </TEMPLATE>
- <!-- (re)use the slider -->
- <ROW spacing="10">
- <MY_SLIDER param_id="demo_param" thumb_height="10" />
- <MY_SLIDER param_id="demo_param2" positions_count="7" thumb_color="#009900" selection_color="#99DD99" />
- </ROW>

Find more information in CANVAS, IMAGE_PARAM_SLIDER and drawing custom knobs.
Comments
Please, authorize to view and post comments.