Extract text from marks using RangeSlider

Dash Python
1

Is there a way to show and extract the text used in Marks.

I am looking for a way that tooltip = { ‘always_visible’: True } shows the text, for example: ‘3 °F’ when 3 is selected. And I want to use that value in the rest of my code, but I am only able to get the value 3 out of there with a callback.

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

app = dash.Dash()

app.layout = html.Div([
    dcc.RangeSlider(id='range_slider',
        min=0,
        max=10,
        step=None,
        marks={
            0: '0 °F',
            3: '3 °F',
            5: '5 °F',
            7.65: '7.65 °F',
            10: '10 °F'
        },
        value=[3, 7.65],
        tooltip = { 'always_visible': True }
    ),
    html.Div(id='output_slider')
])

@app.callback(
    Output(component_id='output_slider', component_property='children'),
    Input(component_id='range_slider', component_property='value')
)
def update_output(value):
    return 'The begin date is "{}" with value{}'.format(type(value), value)

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

Thanks in advanced

2

hi Rumiko,

The info you are searching for is in the ‘marks’ property, you need also to call that property as input and find the information into the callback:
Add this as an input:

Input(component_id='range_slider', component_property='marks')

And find the info in marks using the ‘value’ given by the other input.

1 Like
3

Hi Eduardo,

Thanks a lot! That works perfectly. (Was trying to make it work for 2 days, new to dash)

But could this also be used for ‘tooltip = { ‘always_visible’: True }’? Now it just shows the value and not the marks.

4

Hi Rumiko,
Glad to know that this works :smiley:
I don’t understand your last question, if you use the `marks’ proprty as input in your callback, just for taking its values, why then you said that something change? :thinking:
If you want copy again how your code is and I can review it.

5

Hi Eduardo,

Yeah I love it so much how there is so much support online. And I will just display the marks now in the Graph directly, but it is this issue:

Seems like there is no option for what I want yet.