Align slider marks frequency depending on other sliders mark values

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

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

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__)
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']},
     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']},
#Calbacks and functions to create datatables etc.
if __name__ == '__main__':

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.

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.

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.

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.

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