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.

package-view.png
package-down.png


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.


security-fig1.png
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.


1.png
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.


PropertyDescription
Click BehaviorMoveToClickPosition – 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 ButtonsDetermines whether clickable arrows are displayed or not.
MarksHolds a string list. See discussion below.
Marks PositionCenter – 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).
MaxMaximum value of the slider.
MinMinimum value of the slider.
Only Step ValuesDetermines if the thumb can only be positioned at multiples of the step value.
OrientationVertical – the track of the slider is displayed from top to bottom.
Horizontal – the track of the slider is displayed from left to right.
Page StepSpecifies the number of positions the thumb will be moved when the track is clicked.
PositionSpecifies the current position of the thumb.
StepSpecifies the number of positions the thumb will be moved when an arrow button is clicked.
Text LabelsHolds a string list. See discussion below.
Text PositionTopLeft – 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 BarDisabled – 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.


EventDescription
On ChangedFires when the position of the thumb changes.


Marks

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 Labels

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.

Sample Slider

Figure 3 below show a sample of a slider at runtime with the following properties:


PropertyValue
Click BehaviorMoveToClickPosition
Hide ButtonsFalse
Marks1,2,3,4,,6,7,8,9|small
0,5,10|large
Marks PositionCenter
Max10
Min0
Only Step ValuesTrue
OrientationHorizontal
Page Step2
Position3
Step1
Text Labels0|Strongly Disagree
5|Neither
10|Strongly Agree
Text PositionTopLeft
Track BarDisabled


2.png
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.

See Also

Back to top