Slider
The Slider control displays a horizontal slider. Users can select a single value or a range of values by dragging the handle (or the handles) that the control displays.
You can specify if the Slider control is a Value type (users can select one value) or a Range type (users can select the start and end value of a range of values.) The Slider control can work either with a set of numbers or with a set of items containing a display name and a value.
You can also specify the following:
-
The minimum and maximum selectable values.
-
The number of selectable values (“steps”) between the minimum and the maximum.
-
The initially selected value or value range.
-
The color and size of the number.
-
The size of the image.
You can specify if the controls displays labels for values and you can specify the frequency with which it shows these labels.
Binding items to the Slider control
You can bind items to the Slider control instead of setting numbers. If you create a number of items in a folder under PageSettings, you point to that folder in the DataSource property. You specify which field of these items the Slider control uses for the value or values in the DisplayFieldName property. It is these values the control makes available in the SelectedValue or the SelectedValueStart and SelectedValueEnd fields.
You specify which field of these items the Slider control uses for the tooltips that it displays when users drag a handle.
Rebind
You use the rebind method to change the data handled by the control programmatically.
You can also bind items programmatically to the slider by calling the public method rebind(items) on the slider component, like this:
var newItems = [{ "itemId": "{17E6304B-ED32-4A96-A0A1-5C31E5C309A2}", "itemName": "xxVery Bad", "value": "100" }, { "itemId": "{02B5F74D-1C86-4658-B71C-F0D20A367F4D}", "itemName": "xxBad", "value": "200" }, { "itemId": "{44E1BBDA-92DF-4673-9A90-FD02564A92EC}", "itemName": "xxNormal", "value": "300" }];
this.Slider.rebind(newItems);
You pass the items as a JSON array of objects of the type: {itemId, itemName, value}. You can only set the ValueFieldName and DisplayFieldName properties when new data is passed to the control.
rebind(null) is a special case. It will make the Slider control unbound.
When you pass in new data (or set the control to unbound) you have to consider the setting of the Minimum, Maximum, and Step properties. If they are not set, the previous values will remain in effect.
If you call rebind() without the Items parameter, it makes property changes effective for the current data that the control handles. Note that ValueFieldName and DisplayFieldName properties are exceptions to this.
Properties
|
Name |
Description |
Default |
|---|---|---|
|
Appearance | ||
|
DisplayFieldName |
Specify the name of the data field that the control uses to display as a tooltip for the selected item. |
_Display name |
|
IsTitleBar |
If true, the Slider control displays labels above the slider bar. | |
|
TitleValuesStep |
Specify the frequency of labels that the Slider control displays when IsTitleBar is true. If you specify “10”, the Slider control displays every tenth label. | |
|
Type |
Specify the type of the Slider control. You can select Single or Range. |
Single |
|
ValueFieldName |
Specify the name of the data field of the selected item the control uses for the values of SelectedValue, SelectedValueStart, and SelectedValueEnd. | |
|
Data | ||
|
ItemsDataSource |
Specify a data source that retrieves the items that the Slider control displays values from. | |
|
Maximum |
Specify the maximum value that users can select in the Slider control. Maximum and Minimum together specify the scale of the Slider control. | |
|
Minimum |
Specify the minimum value that users can select in the Slider control. Maximum and Minimum together specify the scale of the Slider control. | |
|
SelectedValue |
Specify the selected value of a Slider control of type Single. |
Maximum |
|
SelectedValueEnd |
Specify the value selected as the upper end of a range of values. This is for a Slider control of type Range. |
Maximum |
|
SelectedValueStart |
Specify the value selected as the lower end of a range of values. This is for a Slider control of type Range. |
Minimum |
|
Step |
Specify the number of discrete values that the control makes it possible to select between the maximum and the minimum in a Slider control of type Range. | |
|
TitleValueAffix |
Specify a text string that the Slider control adds before all the labels that it displays. | |
|
TitleValueSuffix |
Specify a text string that the Slider control adds after all the labels that it shows. | |