Range Slider

Range slider

by ChartIQ Library

HTML

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" />

<!-- Required - default style sheet for all charts-->
<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" />

<!-- Required - default style sheet for range slider-->
<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/chartiq.css" media="screen" />

<div class="chartContainer" style="width:100%;height:200px;position:relative;"></div>

<!-- Required -jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.js";
import quoteFeedSimulator from "https://jsfiddle.chartiq.com/chart/examples/feeds/quoteFeedSimulator.js";
import "https://jsfiddle.chartiq.com/chart/js/componentUI.js";
import "https://jsfiddle.chartiq.com/chart/js/addOns.js";

// Activate the License Key
import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js";
getLicenseKey(CIQ);

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

//optionally set a language
const language = "fr-FR";
CIQ.I18N.localize(stxx, language);
// required to let the slider know the language
stxx.preferences.language = language;

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

new CIQ.RangeSlider({
  stx: stxx,
  height:'60px'
}); // instantiate the slider addon

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