Element Details: Input+Slider

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;" />
<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)" />

InputSliders do not appear in exported reports.

Element Group:User Input


Click attribute Name to drill down for more information.

NamePossible ValuesDescription
Sets the background image.
Sets the number of decimal places for displaying the data values. For example, US currency has 2 decimal places.
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.
(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.
The maximum value of the range.
The minimum value of the range.
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.
For sliders wth two thumbs, SecondDefaultValue sets the default value for the second thumb. The default is the slider's MaxValue.
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.
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.
When set to "Vertical", the InputSlider will be a vertical slider. The default is a horizontal slider.
SliderThumbOffsetLeft and SliderThumbOffsetTop allow adjustment of the thumb so that it aligns well with the slider.
SliderThumbOffsetLeft and SliderThumbOffsetTop allow adjustment of the thumb so that it aligns well with the slider.
Sets the image file for the slider's thumb(s).
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.
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.
Text that appears when the user hovers the pointer over the image or text.


Click element to drill down for more information.

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


Click element to drill down for more information.

Event Handler

 Back to top