IMAGE_PARAM_SLIDER
Active element composed of a 'thumb' (optional) and a channel (or background). The user can move the thumb or click anywhere in the background to modify the parameter value. It can be horizontal or vertical.
Attributes brief detailed show all inherited
Examples
The slider without a thumb is similar to the IMAGE_PARAM_LINEAR_METER but with added mouse interaction.
- <!-- create demo param -->
- <PARAM id="demo_param" min="0" max="1" default="0.5" value_format="0.3" />
- <!-- slider without a thumb -->
- <IMAGE_PARAM_SLIDER param_id="demo_param" image="$PLUGIN_DATA_PATH$/Skins/Modern-Theme/sliders/fader_channel.png" image_mouse_mask="" cursor="system::hand" />
- <!-- slider with a thumb -->
- <IMAGE_PARAM_SLIDER param_id="demo_param" image="$PLUGIN_DATA_PATH$/Skins/Modern-Theme/sliders/fader_channel.png" thumb_image="$PLUGIN_DATA_PATH$/Skins/Modern-Theme/sliders/fader_thumb.png" image_mouse_mask="" cursor="system::hand" thumb_h_center="9" thumb_v_center="16" margin_before="2" margin_after="2" />
- <!-- text value of a param -->
- <PARAM_TEXT_CONTROL param_id="demo_param" />

When we add a "thumb" image we often need to correct it's position relative to the main image. For that we can use thumb_h_center and thumb_v_center. To adjust thumb position relative to selection end/start we use margin_before and margin_after.
Experimenting
If you're creating your own slider you could wrap it inside a WIDGET with some background color to see the area that element takes, and then experiment adusting thumb_h_center, thumb_v_center, margin_before, margin_after.
Here for demo purposes we made an offset for the thumb to see how it relates to selection. The first slider has margin_before="0" margin_after="0", so the thumb moves fully from from top to the bottom of the image. Also additional space is automatically added to show the whole thumb image in extreme positions. The second slider has margin_before="50" margin_after="50" so the thumb start/end points are further from the edges. We also added positions_count="11" just for demo purposes.
- <!-- slider with zero margins -->
- <WIDGET background_color="#EEEEEE">
- <IMAGE_PARAM_SLIDER param_id="demo_param" image="$PLUGIN_DATA_PATH$/Skins/Modern-Theme/sliders/fader_channel.png" thumb_image="$PLUGIN_DATA_PATH$/Skins/Modern-Theme/sliders/fader_thumb.png"
- thumb_h_center="20" thumb_v_center="16" margin_before="0" margin_after="0"
- image_mouse_mask="" cursor="system::hand" />
- </WIDGET>
- <!-- slider with margins=50 and positions_count=11 -->
- <WIDGET background_color="#EEEEEE">
- <IMAGE_PARAM_SLIDER param_id="demo_param" image="$PLUGIN_DATA_PATH$/Skins/Modern-Theme/sliders/fader_channel.png" thumb_image="$PLUGIN_DATA_PATH$/Skins/Modern-Theme/sliders/fader_thumb.png"
- thumb_h_center="20" thumb_v_center="16" margin_before="50" margin_after="50" positions_count="11"
- image_mouse_mask="" cursor="system::hand" />
- </WIDGET>

Other options
You can make the slider horizonal using proper images and orientation="horizontal" attribute. The pixel_range attribute allows you adjust the length of mouse movement required for parameter change. Various thumb and image options allow you to change slider look on mouse over, focus, selected and disabled states.
This widget is often used within DEFINE to create a reusable item, like this:
- <!-- define a widget -->
- <DEFINE>
- <MY_SLIDER base_type="IMAGE_PARAM_SLIDER" image="$PLUGIN_DATA_PATH$/Skins/Modern-Theme/sliders/fader_channel.png" thumb_image="$PLUGIN_DATA_PATH$/Skins/Modern-Theme/sliders/fader_thumb.png"
- thumb_h_center="9" thumb_v_center="16" margin_before="2" margin_after="2"
- image_mouse_mask="" cursor="system::hand" />
- </DEFINE>
- <!-- re-use -->
- <MY_SLIDER param_id="param1" />
- <MY_SLIDER param_id="param2" />
- <MY_SLIDER param_id="param3" />
If you need the similar mouse behaviour but without an image, see INVISIBLE_PARAM_SLIDER.
Comments
Please, authorize to view and post comments.