The Morfik Slider package contains a single widget (Slider) that allows users to select among a continuous range of allowed values. The slider widget can be horizontal or vertical, can display incremental tick marks and can display text captions along the control.
A Quick Walkthrough
To use the Morfik Slider package simply add the package to the project by utilizing the “Used Packages” command on the project ribbon (see Figure 1 Used Packages Command), or simply drag the package file onto the application main client area.
|Figure 1: Used Packages Command|
Once added a single widget will appear on the home ribbon when the form designer is active (see Figure 2 Widgets List). This widget can be placed on an application form and provide immediate functionality with minimal coding.
|Figure 2: Widget List|
How to Use the Widget
After dropping a Slider widget on a form, you can use the Properties panel to configure the widget. The main properties that control the display and functionality of the slider are listed in the table below.
|Click Behavior||MoveToClickPosition – move the thumb to the spot where the track was clicked.
DoPageStep – move the thumb by the amount specified in the Page Step property.
|Hide Buttons||Determines whether clickable arrows are displayed or not.|
|Marks||Holds a string list. See discussion below.|
|Marks Position||Center – marks will appear on both sides of the slider.
TopLeft – marks will appear on the top (horizontal) or the left (vertical).<>brBottomRight – marks will appear on the bottom (horizontal) or right (vertical).
|Max||Maximum value of the slider.|
|Min||Minimum value of the slider.|
|Only Step Values||Determines if the thumb can only be positioned at multiples of the step value.|
|Orientation||Vertical – the track of the slider is displayed from top to bottom.
Horizontal – the track of the slider is displayed from left to right.
|Page Step||Specifies the number of positions the thumb will be moved when the track is clicked.|
|Position||Specifies the current position of the thumb.|
|Step||Specifies the number of positions the thumb will be moved when an arrow button is clicked.|
|Text Labels||Holds a string list. See discussion below.|
|Text Position||TopLeft – text labels will appear on the top (horizontal) or left (vertical).
BottomRight – text labels will appear on the bottom (horizontal) or right (vertical).
Both – text labels will appear on both sides.
|Track Bar||Disabled – no colored track bar is displayed.
Normal – colored track bar is displayed to the left (horizontal) or top (vertical) of the thumb.
Reverse - colored track bar is displayed to the right (horizontal) or bottom (vertical) of the thumb.
|On Changed||Fires when the position of the thumb changes.|
There are three types of marks that can be specified: small, normal and large. Numbers separated by commas are used to list the points between the minimum and maximum where that size of tick mark should be placed. For example, 2,4,6,8,12,14,16,18|small specifies that small tick marks should be placed at location 2, 4, .., 18 and 10,20,30,40,50,60,70,80,90|large specifies that large tick marks should be placed every 10 positions. The pipe symbol (|) is used to separate the list of positions from the size specification.
Text can be added to the slider using this string list. The specification for text is similar to that for marks:
10|Strongly Agree 50|Neither Agree or Disagree 90|Strongly Disagree
Notice the position is specified first and a pipe symbol (|) is used to separate the position from the text to place at that position.
Figure 3 below show a sample of a slider at runtime with the following properties:
|Only Step Values||True|
|Text Labels||0|Strongly Disagree
|Figure 3: Sample Slider|
|Note:||The Position property is a read/write property that can be used to specify the location of the thumb or to obtain the value of the thumb at runtime.|