Change Units on slider

I am working on a 1-D transport model which can be found here:
model (jangei.github.io)

I want to implement the option of changing the units on the parameter sliders using the select widget. Is there a way to scale all values (start, end, value or value[0] and value[1] for RangeSliders) or is there a shortcut by altering the format attribute of the sliders? Thanks!

Hi @Janek_G it’s not really clear what, specifically, you are trying to have happen from that description. Please provide more concrete details about the interaction you are trying to accomplish. Otherwise all I can note is that you can update the properties (e.g. start, end, value) to new values at any time by simply assigning to them.

Thank you for your answer.
I am familiar with changing properties (like start, end, value). I am using different sliders to account for different physio-chemical parameters, e.g. the flow rate. I initialize the slider with certain start, end and value and additionally use the FuncTickFormatter in order to display the values neatly. In the case of the flow rate, here is the code for the slider:
flow_mLh_sl = Slider(title = “Flow Rate”, start = flow[0], end = flow[1], step = flow[2], value = flow[3], format=FuncTickFormatter(code=""“return tick.toFixed(1)+’ [mL/h]’”"") ,sizing_mode=“stretch_width”)
Note that this line displays the slider value with the unit [ml/h]. Scaling all parameters like end, start and value would still yield the correct results for me, but the slider values would still be displayed in the units of [mL/h]. So my question would rather be: Is there a way to acces the FuncTickFormatter in a js callback?

Thank you!

Something like this? Create a “format dictionary” of your unit conversions and pass that to a CustomJS callback that applies it. This example takes it 90% of the way there, but what I can’t get to work is for the slider’s format to update “immediately” upon changing the Select widget’s value → that update isn’t occurring until you move the slider -->sl.change.emit() and sl.format.change.emit() don’t do anything here… not sure what I’m missing there.

from bokeh.models import FuncTickFormatter, Slider, Select, CustomJS
from bokeh.plotting import show
from bokeh.layouts import column

sel = Select(title='Units',value='m/s',options=['m/s','km/h'])

fmt_dict = {'m/s':FuncTickFormatter(code="""
                                    return tick.toFixed(1)+' m/s'
                                """)
            ,'km/h':FuncTickFormatter(code="""
                                      return (tick/3.6).toFixed(1)+' km/h'
                                  """)}                                 
      
sl = Slider(start=0,end=10,step=1,value=0,title='Speed',format=fmt_dict['m/s'])

cb = CustomJS(args=dict(sel=sel,sl=sl,fmt_dict=fmt_dict)
              ,code='''
              var new_format = fmt_dict[sel.value]
              sl.format=new_format
              //this doesn't do anything.... want to get the new format applied here
              sl.change.emit()
              sl.format.change.emit()
              ''')
sel.js_on_change('value',cb)
show(column([sel,sl]))

Anyway hope this helps.

EDIT LOL I am aware I got the actual conversion between m/s and km/h backwards

This 1000 % exactly what I am looking for, thank you so much! I already implemented it in my model and it works (almost) exactly as I need it to. I will let you know if I find a way to display the change in units upon unit selection. The delay / necessity to interact with the slider again in order to see the change feels weird, but I will take a look at it.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.