Skip to content

Range Slider

The Range Slider offers select filtering of sequential range data, e.g. time or range

Screenshot
A chart with a bar range slider

Basics

Screenshot

Data Source
A data source
Focus
A View State Parameter for linking components
Range
A View State Parameter: links the Range Slider to another component, which will have the same View State Parameter in its Range
Link to a chart
Selected Value
A View State Parameter for the value selected
Selected Min Value
A View State Parameter for the minimum value of the selected range
Selected Max Value
A View State Parameter for the maximum value of the selected range

Selected values

X axis

Axis Value
A Data Source column to be used as the X-axis label
Axis Type

Data type for the Axis Value

Wrong X-axis labels?

If X-axis labels look incorrect, try selecting a different type

Axis Format
For when Axis Type is Date
Axis Scale
Define whether axis uses default ordering from the query ('none') or sequential (time, date etc) scaling
Legend Label Tag
Add label tag for x-axis legend
Ticks

When Use Fixed Num of Ticks is checked, chart displays Num of Ticks ticks in the X axis.

When Show All Ticks is checked, every charted data point is shown in the X axis

Rotation
Rotated labels
Rotated labels

Segments

Allows for custom look of range slider by percentage zones

Screenshot

Name
Zone name
Percentage
Percentage area filled by segment zone
Color
Color shading of range slider for defined percentage area
  1. Create a View State Parameter and select it as Range

    Screenshot

  2. Give the target chart the same Data Source and Range settings

    Screenshot

  3. Use to Quickview or Preview mode to test the result

Style

Style for common settings

ChartBarColors

ChartBarColors when a pivot query is used

For non-Pivot data, line colors are set by the Y-Axis columns

Format

Screenshot

Format for common settings

Y-axis Format
Number of decimal places
Fill Color
Background color of range during selection
Fill Opacity
Opacity of the Fill Color
Fill Color (Inverse)
Background color inside selected range
Fill Opacity (Inverse)
Opacity of Fill Color (Inverse)
Resize Stroke Color
Border color of selected range
Resize Icon Color
Color of the Range Slider’s drag bar

Style for common settings