Ability to have different Outputs react on either a 'drag' or 'mouseup' for a single Slider

[mikesmith1611]

Would it be feasible to have two different Inputs from a slider:
'drag-value' and a 'mouseup-value'

This would then allow the user to, for example, update a label that reflects the value of the slider with a drag and then update a longer callback on mouseup.

[chriddyp]

@mikesmith1611 - that's a really good idea.

The only way that this would be possible right now (with the current framework) would be to introduce a new property like drag_value and update that value on drag, so that you would have:

@app.callback(..., [Input('slider', 'drag_value')])

@app.callback(..., [Input('slider', 'value')])

That wouldn't be hard to implement, although I'm worried about it introducing some complexity in the documentation and pedagogy...

For now, you're welcome to create a fork of these components and implement this. Here is the logic where we update the value depending on the updatemode: https://github.com/plotly/dash-core-components/blob/master/src/components/Slider.react.js#L23-L35. You also need to introduce a new property in the propTypes: https://github.com/plotly/dash-core-components/blob/master/src/components/Slider.react.js#L71-L74 called something like drag_value

[gwsampso]

I'm really interested in this kind of functionality and how to implement.

I have a whole bunch of calculations that depend off the values of the slider but at the same time I want to continually update the values displayed so the user knows where they are sliding.

How could I extend this sample application to store the final values after mouseup somewhere whilst continually updating on drag

Sample app with drag slider updating values

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

from components import Column, Header, Row

import pandas as pd
from pandas.tseries.offsets import *

df = pd.read_csv('https://vincentarelbundock.github.io/Rdatasets/csv/boot/acme.csv')
df['month'] = pd.to_datetime(df['month'])

def _create_year_slider(datelist):
    dlist = pd.DatetimeIndex(datelist).normalize()
    tags = {}
    x = 0
    for i in dlist.unique():
        tags[x] = (i+pd.tseries.offsets.DateOffset(months=1)).strftime('%b-%Y')
        x = x+1
    return tags

my_dates_list = _create_year_slider(df['month'])

app = dash.Dash(
    __name__
)

server = app.server

# Standard Dash app code below
app.layout = html.Div(className='container', children=[

    Row([
    
    Column(width=4, children=[
        html.Div(id='updatemode-output-container', style={'margin-top': 20})
        ]),
    ]),
    
    Row([

        dcc.RangeSlider(
            id='year-slider',
            updatemode='drag',
            min=0,
            max=max(my_dates_list),
            value=[0, max(my_dates_list)],
            ), 
    ])
])

@app.callback(Output('updatemode-output-container', 'children'),
            [Input('year-slider', 'value')])
def display_value(value):
    return '{0} to {1}'.format(my_dates_list[value[0]], my_dates_list[value[1]])


if __name__ == '__main__':
    app.run_server(debug=True)

`

[gwsampso]

@mikesmith1611 how did your testing go? I can see you made a couple of source code changes

[almarklein]

The volume-slicer I'm working on would also greatly benefit from this feature :) I'd be happy to prepare a PR, if there is a good chance for it to be accepted.

although I'm worried about it introducing some complexity in the documentation and pedagogy...

Arguably, the API would become simpler, because the updatemode option can then be deprecated.