Element Details: Input+Slider
 Back


Available in: Logi Info Source code name: InputSliderIntroduced in: v9.0.52

Allows user input with a graphical slider control.

The InputSlider may be horizontal or vertical. This is specified by the SliderOrientation attribute.

The BackgroundImage and ThumbImage attributes set the slider’s images. Default images are provided when these are left blank.

The SliderLength attribute sets the width or height of the slider, in pixels, according to the SliderOrientation. The appearance is best when the value matches the physical size of the BackgroundImage. The default is 200.

SliderThumbOffsetLeft and SliderThumbOffsetTop allow adjustment of the thumb so that it aligns well with the slider.

Set the low and high values with the MinValue and MaxValue attributes. The default values are 0 and 100.

The slider can have “snap” points or “ticks”. Set TickCount to the number of detents desired. The default value of 0 creates a smooth slider that stops at the pixel level.

After the page is submitted, the selected value can be accessed with an @Request token.

The DecimalPoints attribute helps with rounding slider values. The default is 0, which causes the slider to return only integer values.

The slider can have two thumbs. The initial value of the second thumb is set with the SecondDefaultValue attribute. The value of the second thumb can be accessed with an @Request token. The ID of the second thumb is specified with the SecondSliderID attribute value.

InputSliders support two EventHandlers. These can be used to provide user feedback or refresh the current page or launch another report. EventHandler DhtmlEvent=”ondrag” is fired as the user drags the slider. EventHandler DhtmlEvent=”onchange” is fired when the drag operation completes. This example updates a label element as the slider is dragged.

<InputSlider ID="mySlider">
<EventHandler DhtmlEvent="ondrag" ID="ondrag">
<Action Type="Link">
<Target Type="Link" Link="javascript:document.getElementById('lblSliderValue').innerText=document.getElementById('mySlider').value;" />
</Action>
</EventHandler>
</InputSlider>
<Label ID="lblSliderValue" />

The InputSlider adds a JavaScript function that can be used to set the slider value from script. The function below, rdInputSlider() sets a slider value to 100.

rdInputSliderSet('mySlider', 100)

Here is a more complete example that sets the slider value when the user changes the value in an InputText element.

<InputText ID="txtSetSlider" InputSize="2" DefaultValue="@Request.mySlider~" Caption="Set Slider:">
<EventHandler DhtmlEvent="onchange" ID="onchange">
<Action Type="Link" ID="updateSlider">
<Target Type="Link" Link="javascript:rdInputSliderSet('mySlider',document.getElementById('txtSetSlider').value)" />
</Action>
</EventHandler>
</InputText>

InputSliders do not appear in exported reports.

Element Group:User Input



ATTRIBUTES

Click attribute Name to drill down for more information.

NamePossible ValuesDescription
BackgroundImage
UserDefined
Sets the background image.
DecimalPoints
UserDefined
Sets the number of decimal places for displaying the data values. For example, US currency has 2 decimal places.
DefaultValue
UserDefined
The default value displayed or selected when the report page is initially displayed. For the InputSelectList element, to show multiple selected values, this attribute can be over-ridden by adding a DefaultValues element with a DataLayer below that.
ID
UserDefined
(Required) The ID attribute is a pervasive attribute that uniquely identifies an element within a definition file. The ID needs to be a unique value within the definition.
MaxValue
UserDefined
The maximum value of the range.
MinValue
UserDefined
The minimum value of the range.
SaveInLocalStorage
True
False
LocalStorage stores data in the browser. The information is maintained between sessions. SaveInLocalStorage uses the browser's localStorage to preserve input values so they re-appear when a page is redisplayed. It is a way of keeping default values. Set SaveInLocalStorage="True" to preserve and restore input values. SaveInLocalStorage is over-ridden by DefaultValue attributes. Do not use SaveInLocalStorage and DefaultValue attributes together. SaveInLocalStorage does not work under DataTables and other data-repeating elements. LocalStorage requires browser support. IE7 does not support LocalStorage.
SecondDefaultValue
UserDefined
For sliders wth two thumbs, SecondDefaultValue sets the default value for the second thumb. The default is the slider's MaxValue.
SecondSliderID
UserDefined
When set, SecondSliderID creates a second thumb for the slider. You can access the value of the second slider with an @Request token, specifying this ID value.
SliderLength
UserDefined
The SliderLength attribute sets the width or height of the slider, in pixels, depending on the SliderOrientation. It represents the distance that the thumb control(s) can move. SliderLength does not stretch the image. The image size should correspond to the SliderLength. If you need a larger or smaller slider, you will need to create a new background image. The default is 200.
SliderOrientation
Vertical
Horizontal
When set to "Vertical", the InputSlider will be a vertical slider. The default is a horizontal slider.
SliderThumbOffsetLeft
UserDefined
SliderThumbOffsetLeft and SliderThumbOffsetTop allow adjustment of the thumb so that it aligns well with the slider.
SliderThumbOffsetTop
UserDefined
SliderThumbOffsetLeft and SliderThumbOffsetTop allow adjustment of the thumb so that it aligns well with the slider.
ThumbImage
UserDefined
Sets the image file for the slider's thumb(s).
ThumbSeparationValue
UserDefined
When there are two thumbs for the slider, sets the minimum seperation between the thumbs. The value is in the coordinates of the MinValue and MaxValue attributes, rather than pixels.
TickCount
UserDefined
The number of major tick marks for the scale. For example, a gauge with a scale that runs from 0 to 100 should specify 10 tick marks. (The first tick mark, usually 0, is assumed - so there are actually 11 tick marks for a scale from 0 to 100.) Set TickCount="0" for no tick marks. For the InputSlider element, this attribute controls the detents, or stop points, as the thumb is dragged. Visible tick marks must be built into the image when the image is designed. The InputSlider does not automatically create visible tick marks.
Tooltip
UserDefined
Text that appears when the user hovers the pointer over the image or text.



PARENT ELEMENTS

Click element to drill down for more information.

Body
Column Cell
Data Table Column
Division
Fieldset Box
HTML Tag
List Item
More Info Row
More Info Row Column
Panel Content
Panel Parameters
Popup Panel
Rectangle
Report Footer
Report Header
Responsive Column
Tab Panel


CHILD ELEMENTS

Click element to drill down for more information.

Event Handler


 Back to top


 Chart Debug