Black Lives Matter. Please consider donating to Black Girls Code today.

Is it possible to update rangeslider range?

Following this example: I have the following code:

var imuPlot = document.getElementById('imuPlot');
var rawDataURL = '';
var xField = 'Date';
var yField = 'Mean_TemperatureC';

Plotly.d3.csv(rawDataURL, function(err, rawData) {
    if(err) throw err;

    var data = prepData(rawData);
    var layout = {
        title: 'Motion Data',
        xaxis: {
            rangeslider: {}
        yaxis: {
            fixedrange: true

    Plotly.plot('imuPlot', data, layout);
    imuPlot.on('plotly_relayout', function(data){
    var update = {
        xaxis: {range: [15434005078.125, 805458100781.25], rangeslider: {}}
    Plotly.relayout(imuPlot, update);

function prepData(rawData) {
    var x = [];
    var y = [];

    rawData.forEach(function(datum, i) {
        if(i % 100) return;

        x.push(new Date(datum[xField]));

    return [{
        mode: 'lines',
        x: x,
        y: y

Note the appended:

    var update = {
        xaxis: {range: [15434005078.125, 805458100781.25], rangeslider: {}}
    Plotly.relayout(imuPlot, update);

The xaxis seems to get updated on the plot, but the rangeslider does not get updated. Am I missing another update call? Is there some way to access the d3 d3.slider().value([x1,x2]) function?


Plotly.relayout(imuPlot, 'xaxis.range', [/* new xaxis range */])

will update the x-axis range (the visible part of on the main graph and unshaded part in the range slider)

Plotly.relayout(imuPlot, 'xaxis.rangeslider.range', [/* new xaxis rangeslider range */])

will update the visible range (shaded + unshaded) of the range slider.

When trying the above code, I get ‘Cannot read property ‘on’ of null’ in ref to imuPlot.on
Any ideas?

Maybe you are missing the $ sign?