Using a Slider

Overview

As a final step, we tie the moving average to the value of a slider. The slider is added to the page through the components toolbox. Once it has been added, make sure that it exports its value to the page by selecting the slider and then clicking the export checkbox.

Exporting the sliders value makes it available to the other items in the page. In particular, the value is available in the script by using the $val service and passing in the name of the slider (which is set to "slider" by default).

$val('slider')



When the value of the slider changes, all components that are dependent on the slider value are updated or re-run.

Full Script

The following is the script used in the demo.

let data = $val('Fixed Timeseries').map((p,i,data)=>{ let item = {...p, ma:null}; let list = $list(data).first(i+1).last($val('slider')); if(list.length === $val('slider')) item.ma = list.map(p=>p.price).average(); return item; }); $val.set('data',data);