Class: RangeSlider

CIQ. RangeSlider

new RangeSlider(params)

Add-on that puts a range slider under the chart.

This allows the dataSegment to be selectable as a portion of the dataset.

Requires js/addOns.js.

It also requires additional CSS.

Either add:

<link rel="stylesheet" type="text/css" href="css/chartiq.css" media="screen" />

Or explicitly include this CSS:

.stx_range_slider.shading {
    background-color: rgba(128, 128, 128, 0.3);
    border: solid 2px #0090b7;
    width: 5px;

Once instantiated, it can be displayed or hidden by simply setting the rangeSlider parameter of the primary chart's layout object, and then issuing a layout change event to trigger the new status. Make sure to use the callback to enable the slider on initial load to prevent 'out of sequence' issues. See examples for exact syntax.

Remember, a range slider is simply just another chart. So you configure it and customize it using the same parameters as you would the primary chart. The only difference is that the slider object will be a sub element of the primary chart, living inside the slider.slider object.
For example, if you wanted to turn off the x axis on the slider, assuming a chart instantiated as stxx, you would execute:


If using chartIQ Web Components, the slider needs to be created before the UI manager (startUI) is called for custom themes to apply.

It is important to note that the range slider chart container will 'create itself' UNDER the primary chart container, not INSIDE. As such, to ensure styling is shared between the two containers, so they match in look and feel, all the styling must be on a parent div container rather than the primary chart container itself.

For example, do this:

<div class="all-charts">
<div style="grid-column: span 6;grid-row: span 2;">
    <div class="chartwrap"> <!-- begin of wrapper with desired styling -->
    <div class="chartContainer1" style="width:100%;height:100%;position:relative"></div>
    <!-- the slider will be added here -->
</div> <!-- end of wrapper -->

Not this:

<div class="all-charts">
<div class="chartwrap" style="grid-column: span 6;grid-row: span 2;">
    <div class="chartContainer1" style="width:100%;height:100%;position:relative"></div>

Range slider working example:

Name Type Description
params object

Configuration parameters.

Name Type Argument Default Description
stx CIQ.ChartEngine <optional>

The chart object.

height number <optional>

Height of range slider panel.

yAxis object <optional>

Optional yAxis parameters.

chartContainer number <optional>

Handle to the main chart container.

menuContextClass string <optional>

A CSS class name used to query the menu DOM element that contains the UI control for the range slider add-on. In a multi-chart document, the add-on is available only on charts that have a menu DOM element with the value for menuContextClass as a class attribute.

  • 4.0.0
  • 6.1.0 Added params.yAxis.
  • 8.0.0 Added params.menuContextClass.

Declare a range slider and enable by default using the loadChart callback.

var stxx=new CIQ.ChartEngine({container:document.querySelector(".chartContainer")});


// instantiate a range slider
new CIQ.RangeSlider({stx:stxx});

function displayChart(){
    stxx.newChart("SPY", null, null,function(){
        // for smoother visualization, enable AFTER THE MAIN CHART HAS COMPLETED LOADING ITS DATA.
        stxx.layout.rangeSlider=true; // show the slider
        stxx.changeOccurred("layout"); // signal the change to force a redraw.

Declare a range slider and enable/disable using commands to be triggered from a menu.

var stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") });

// Instantiate a range slider.
new CIQ.RangeSlider({ stx: stxx });

// To display the slider from a menu use:
stxx.layout.rangeSlider = true; // show the slider
stxx.changeOccurred("layout"); // signal the change to force a redraw.

// To hide the slider from a menu use:
stxx.layout.rangeSlider = false; // hide the slider
stxx.changeOccurred("layout"); // signal the change to force a redraw.


updateStyles(obj, attribute, value)

Dynamically updates the styling of the range slider.

This method can be used to update CSS styles if you are injecting stylesheets using JavaScript.

Name Type Description
obj string

The CSS selector for which a style property is changed.

attribute string

The style property changed in the CSS selector rule-set.

value string

The value to apply to the CSS property.

  • 8.0.0

// Set the shading of the range slider.
stxx.slider.updateStyles("stx_range_slider shading", "backgroundColor", "rgba(200, 50, 50, 0.45)");
// Set the color of the bars of the range slider to red.
stxx.slider.updateStyles("stx_range_slider shading", "borderTopColor", "rgba(255, 0, 0)");