Align slider marks frequency depending on other sliders mark values

Dash Python
1

I’m trying to get an idea on how to achieve this task. I created multiple sliders connected to multiple datatables.

slider
slider1913×207 10.5 KB

Each slider queries selected dates data from a specific collection (MongoDB)

datatable
datatable952×904 25.9 KB

Right now my sliders works just fine.

This is how it works:

#define database.
database = client["signals"]
#define collections
 daily_signals = database["daily_signals"]
days3 = database["3d_signals"]
#query dates as a dataframe for slider marks.
dfd = pd.DataFrame(daily_signals.distinct("Date"), columns=['Date'])
df3d = pd.DataFrame(days3.distinct("Date"), columns=['Date'])
numdate = [x for x in range(len(dfd['Date'].unique()))]
numdate3d = [x for x in range(len(df3d['Date'].unique()))]
app = Dash(__name__)
#sliders
app.layout = html.Div([
     dcc.Slider(min=numdatem[0], #the first date
                max=numdatem[-1], #the last date
                value=numdatem[0], #default: the first
                marks = {numd:date.strftime('%m') for numd,date in zip(numdatew, dfm['Date'].dt.date.unique())},
                step=None,
                included=False
                ),
     dcc.Slider(min=numdate2w[0], #the first date
                max=numdate2w[-1], #the last date
                value=numdate2w[0], #default: the first
                marks = {numd:date.strftime('%d/%m') for numd,date in zip(numdatew, df2w['Date'].dt.date.unique())},
                step=None,
                included=False
                ),])
#Calbacks and functions to create datatables etc.
if __name__ == '__main__':
    app.run_server(debug=True)

There are five different timeframes D,3D,W,2W,M. I only added 2 of them here.

What i want to achieve is something like a vintage radio slider but it will more look like a calender which only shows workdays with periods of daily, 3 days, weekly, 2 weeks and monthly periods.

sampleslider
sampleslider1552×208 6.61 KB

Somehow other slider marks must be aligned with daily sliders marks and each slider should be independent.
I don’t know where to look or where to start.

Thanks in advance.

2

Hi @celal welcome to the forums.

I could imagine creating the calender as scatterplot and the moving rectangle as a shape on top of that. The shape would change it’s position on move of a real dcc.Slider() via clientside callback.

But this seems to be a bit of a hassle.

3

Let’s forget about the radio slider. All I want is to align slider marks. For instance each mark on daily slider represents a workday. So a mark on 3 days slider should represent 3 days, 5 days for weekly slider, 10 days for 2 weeks slider and finaly 30 days for monthly slider.

tetherslider
tetherslider857×142 1.56 KB

I’m not sure what i want to do can be solved with bootstrap components. More like a dataframe issue.