API Reference
Namespaces
Classes
Events
Global
Externals

Class: RangeSlider

CIQ. RangeSlider


new RangeSlider(params)

Add-on that adds a range slider to the chart.

The range slider allows the dataSegment to be selectable as a portion of the data set.

Requires addOns.js.

Also requires additional CSS. Add the following style sheet:

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

or directly include this CSS:

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

Once instantiated, the range slider can be displayed or hidden by setting the rangeSlider parameter of the primary chart's layout object and then issuing a layout change event to trigger the new status. When initialing loading the chart, enable the range slider in a callback function to prevent out‑of‑sequence issues. See the examples below.

A range slider is simply 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 is a sub‑element of the primary chart, contained in 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:

stxx.slider.slider.xaxisHeight = 0;

It is important to note that the range slider chart DOM element creates itself below the primary chart container element, not inside the container. As such, all styling must be on a parent div container rather than on the primary chart container itself to ensure styling is shared between the chart and range slider containers.

For example, do this:

<div class="all-charts">
    <div style="grid-column: span 6; grid-row: span 2;">
        <div class="chartwrap"> <!-- Beginning 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. -->
    </div>
</div>

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>
    </div>
</div>

Range slider example:

Parameters:
Name Type Description
params object

Configuration parameters.

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

The chart object.

height number <optional>
"95px"

Height of the range slider panel. Must include a CSS unit, such as "px".

yAxis object <optional>

Y-axis parameters.

chartContainer number <optional>

Handle to the main chart container. Defaults to stxx.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.

Since:
  • 4.0.0
  • 6.1.0 Added params.yAxis.
  • 8.0.0 Added params.menuContextClass.
Examples

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

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

stxx.attachQuoteFeed(quoteFeedSimulator, { refreshInterval: 1, bufferSize: 200 });

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

function displayChart() {
	stxx.loadChart("SPY", 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.
	});
}

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

const 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.

Methods


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.

Parameters:
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.

Since:
  • 8.0.0

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