Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT! # Is it possible to have rangeslider with geometric step increase?

Hi,

Is it possible to have rangesliders with geometric step increase ?
For example, going from 10, then 100, then 1000.

Thank you.

Hi @deejep,

This is possible using the `marks` property where you can set the value of the labels to increment geometrically.

If you are looking to set the `step` value to increment logarithmically that unfortunately isn’t possible at the moment I’ve attached a code snippet that might help you with solving the `marks` issue:

``````import dash_core_components as dcc
import dash

app = dash.Dash('')

app.layout = html.Div([
dcc.RangeSlider(
id='rangeslider',
marks={(10 ** i): '{}'.format(10 ** i) for i in range(4)},
max=1000
)
])
``````

Let me know if I can help out with anything else.

Unfortunately, the issue about your solution is that the steps don’t have the same length on the slider. This kills the point of a rangeSlider.

@deejep
You’re totally right, that’s my bad check out this solution below and let me know if this works for you:

Another way to go about it, and to create a mock log scale slider is the following, in the following example you can set the marks geometrically increasing on a linear scale so for example, use the label [1, 10, 100, 1000] for values [0, 1, 2, 3] and set the `step` value to 0.01 to allow you to move between the values. This will evenly space the values and you can use `transform_value` to find the logarithmic value of the handles.

``````import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import *
import dash

app = dash.Dash('')

def transform_value(value):
if(type(value) == list):
valueList = []
for i in value:
valueList.append(10 ** i)
return valueList
else:
return 10 ** value

app.layout = html.Div([
dcc.RangeSlider(
id='rangeslider',
marks={(i): '{}'.format(10 ** i) for i in range(4)},
max=3,
dots=False,
step=0.01
),
html.P(id='placeholder')
])

@app.callback(Output('placeholder', 'children'), [Input('rangeslider', 'value')])
def display_value(value):
print(value)
transformed_value = transform_value(value) # convert back to the value displayed in the label
print(transformed_value)
``````

In the case that you wanna keep a linear based slider you can use the following to get the log values of the handles same as above if you wish.

``````import dash_core_components as dcc
import dash_html_components as html
import dash

app = dash.Dash('')

def transform_value(value):
if(type(value) == list):
valueList = []
for i in value:
valueList.append(10 ** i)
return valueList
else:
return 10 ** value

app.layout = html.Div([
dcc.RangeSlider(
id='rangeslider',
marks={(transform_value(i)): '{}'.format(10 ** i) for i in range(4)},
max=1000,
value=0
)
])

@app.callback(Output(...), [Input('rangeslider', 'value')])
def display_value(value):
transformed_value = transform_value(value) # convert back to the value displayed in the label
``````
2 Likes