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

How to change rangeslider layout using JS?

How can I change Range Slider layout? Now my RangeSlider looks like this one:
image

and should look like this one:

How can I do this? This is already disponible to JS?

Hi @akotsugai, can you share a code sample for your graph? And any console errors you may have in your browser? Thanks, I’d love to lend a hand.

1 Like

hi @bherford
Now I have set a simple rangeslider and its working perfectly. The problem is that I need to change the layout of the rangerslider to spots, and I don’t know how to do this using JS.

    xaxis: {
      title: 'Sessie',
      automargin: true,
      showticklabels: true,
      linecolor: 'rgb(96,85,95)',
      linewidth: 1,   

      rangeslider:{
      },  

    },
    
    yaxis: {
      fixedrange: true,
      title: 'Score',
      automargin: true,
      showticklabels: true,
      linecolor: 'rgb(96,85,95)',
      linewidth: 1,
    },
  });

I think layout sliders would be better suited for your application.

We have a few in JS examples over at: https://plot.ly/javascript/sliders/