Is it possible to have rangeslider with geometric step increase?

Dash Python
1

Hi,

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

Thank you.

3

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 :frowning:

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.

4

Hi, thank for replying.
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.

5

@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
3 Likes
6

Haven’t thought about this. Thanks !