Class: RangeSlider

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.

The range slider can be toggled using the Ctrl+Alt+R keystroke combination (see the rangeSlider action in hotkeyConfig.hotkeys in js/defaultConfiguration.js).

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:

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.
    });
}

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.