How to update dcc.slider state with a play/pause button?

So we have a slider that is moving based on one second per unit of measure using app.clientside_callbacks. That is working properly but if the button is pushed to stop and then the slider is dragged to a new position then when the play button is pressed again it reverts back to the original position it was in when the stop button was pushed. I know I have to somehow update the time value. Any help would be appreciated.

app.clientside_callback(“function(n_intervals, max){return (n_intervals % max);}”,
Output(“time”, “value”), Input(“trigger”, “n_intervals”), Input(“time”, “max”))

app.clientside_callback(“function(n_clicks){return (n_clicks % 2 == 0)? ‘Play’ : ‘Stop’;}”,
Output(“play”, “children”), Input(“play”, “n_clicks”))

app.clientside_callback(“function(n_clicks){return (n_clicks % 2 == 0)? 0 : -1;}”,
Output(“trigger”, “max_intervals”), Input(“play”, “n_clicks”))

The slider code

        dl.TileLayer(url=mapbox_url.format(id="satellite-streets-v9", access_token=mapbox_access_token)),  # background map

        dl.LayerGroup(dl.PolylineDecorator(positions=positions, patterns=patterns), id="layerFOV"),
        dl.LayerGroup(dl.PolylineDecorator(positions=positions, patterns=patterns), id="layer2") # container with data
    ], center=(positions[1][0], positions[1][1]), zoom=40, style={'height': '50vh'}),
    dcc.Slider(min = 0, max = length_time, step=1, 
                        20: 'Engagement 1',
                        352: 'Engagement 2',
                        859: 'Engagement 3',
                        1139: 'Engagement 4',
                        1516: 'Engagement 5'
               value=0, id="time"),  # time slider
    dcc.Interval(id="trigger", max_intervals = length_time, n_intervals=0),  # animation trigger
        html.Button("Play", id="play", n_clicks=0), 
        style={"display": "inline-block"},