Range Slider not working properly in Plotly.js

I want to be able to get range slider and a selector in my graph, I have followed the example in the documentation, but I’m getting the following error:

1.- The selector dates, are still using ‘backwards’, as opposed to ‘todate’, which is a bit weird, perhaps is the fact that I’m not understanding this 100%, but I would like to get 6 and 12 months from today, is there a way to use a forward from the earliest date period?

https://jsfiddle.net/jt1o26bd/

var Deals = {
                      x: {{ deals_plot.lic_deals_date|safe }},
                      y: {{ deals_plot.lic_deals_licenses }},
                      name: 'Active Licenses',
                      type: 'bar',
                      marker: {
                                color: 'rgb(0,131,117)',

                              }
                    };
       var Leads = {
                      x: {{ deals_plot.lic_leads_date|safe }},
                      y: {{ deals_plot.lic_leads_licenses }},
                      name: 'Potential Licenses',
                      type: 'bar',
                      marker: {
                                color: 'rgb(160,220,210)',

                              }
                    };

       var data = [Deals,Leads];

       var layout = {
                title: 'Software Licenses Term',
                barmode: 'stack',
                xaxis: {
                       autorange: true,
                       rangeselector: {buttons: [
                                                     {step: 'all'},
                                                    {
                                                      count: 1,
                                                      label: 'YTD',
                                                      step: 'year',
                                                      stepmode: 'todate'
                                                    },
                                                    {
                                                      count: 6,
                                                      label: '6m',
                                                      step: 'month',
                                                      stepmode: 'todate'
                                                    }
                                                    ]},
                       rangeslider: { },
                       type: 'date',
                        tickfont:{
                           size: 14
                            },
                        },
                yaxis: {
                      tickfont:{
                                size: 14
                            }
                     }

        };

Could anyone let me know what is going on?