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

Rangeslider step not working

I have the following code:

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import *
from dash.exceptions import PreventUpdate
import dash
import pandas as pd

external_stylesheets = ['']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Button('Press', id='button-dd', n_clicks=0),
    html.Div(id='output-container-range-slider-non-linear', style={'margin-top': 20})

def date_range(start_date, end_date, period):
    if period == 'Week':
        range_dt = pd.date_range(start=start_date, end=end_date, freq='W')
    elif period == 'Month':
        range_dt = pd.period_range(start=start_date, end=end_date, freq='M')
    elif period == 'Year':
        range_dt = pd.date_range(start=start_date, end=end_date, freq='Y')
    dates = [i.strftime('%Y-%m-%d') for i in range_dt]
    #return {i : dates[i] for i in range(len(dates))}
    return {i : {'label' : dates[i], } for i in range(len(dates))}


def populate_forecast_dropdowns(n_clicks):
    if n_clicks < 1:
        raise PreventUpdate
    elif n_clicks > 0:
        range_slider_min = '2010-02-05'
        range_slider_max = '2012-10-26'
        marks = date_range(range_slider_min, range_slider_max, 'Week')
        min_v = 0
        max_v = len(marks)-1
        step = 10
        return min_v, max_v, marks, [min_v, max_v], step

if __name__ == '__main__':

The rangeslider isn’t responding to me setting step=10. In the code above, I return step to the rangeslider dynamically but even when I set it explicitly in the layout the rangeslider still ignores step. If you look at the layout as well, the dots are set to False, but the output has dots in it.

I have also tried returning the entire rangeslider dynamically in a callback, but I get the same result. Any idea how to fix this? The reason I’d like step to work in this instance is because the marks (dates in this case) are not visible if the range is too long. I’d appreciate any help or alternatives I could take to achieve the same goal.

Currently the work around I’ve devised involves removing the labels and the dots by using css display:none;

I’ve thought about using tooltip to show the dates. However, the tooltips only contains information about the value of the slider. Is there a way to set the tooltip so that it shows the mark labels?