DCC.Rangeslider.rangeslider

DCC.Rangeslider.rangeslider is a component for rendering a range slider. Users interact with a DCC.Rangeslider.rangeslider by selecting areas on the rail or by dragging handles.

The points displayed on a DCC.Rangeslider.rangeslider are called marks. In Dash 2.1 and later, they are autogenerated if not explicitly provided or turned off.

Examples

Find a few usage examples below.

Simple RangeSlider Example

An example of a simple DCC.Rangeslider.rangeslider tied to a callback. The callback takes the DCC.Rangeslider.rangeslider‘s currently selected range and outputs it to a html.Div.

open Dash.NET.Suave
open Dash.NET.DCC
open Dash.NET

let layout =
    Html.div [ 
        Attr.children [ 
            RangeSlider.rangeSlider "my-range-slider" [ 
                RangeSlider.Attr.min 0.0
                RangeSlider.Attr.max 20.0
                RangeSlider.Attr.step 0.5
                RangeSlider.Attr.value [ 5.0; 15.0 ] 
            ]
            Html.div [Attr.id "output-container-range-slider" ] 
        ] 
    ]

let callback =
    let output = "output-container-range-slider" @. Children
    Callback.singleOut (
        "my-range-slider" @. Value,
        output,
        (fun (value: float list) ->
            let label = $"You have selected \"{value}\""
            output => label
        )
    )

let externalStylesheets =
    [ "https://codepen.io/chriddyp/pen/bWLwgP.css" ]

[<EntryPoint>]
let main args =
    DashApp.initDefault ()
    |> DashApp.appendCSSLinks externalStylesheets
    |> DashApp.withLayout layout
    |> DashApp.addCallback callback

Marks and Steps

If slider RangeSlider.Attr.marks are defined and RangeSlider.Attr.step is set to -0.001
then the slider will only be able to select values that have been predefined by the RangeSlider.Attr.marks.
Note that the default is RangeSlider.Attr.step 1.0, so you must explicitly specify -0.001 to get this behavior.

let mark = [  (0.0, RangeSlider.Mark.Value "0°F")
              (3.0, RangeSlider.Mark.Value "3°F")
              (5.0, RangeSlider.Mark.Value "5°F")
              (7.65, RangeSlider.Mark.Value "7.65°F")
              (10.0, RangeSlider.Mark.Value "10°") 
           ] |> Map.ofList

let layout =
  RangeSlider.rangeSlider "my-range-slider" [
        RangeSlider.Attr.min 0.0
        RangeSlider.Attr.max 10.0
        RangeSlider.Attr.step -0.001
        RangeSlider.Attr.marks mark
        RangeSlider.Attr.value [ 3.0; 7.65 ] 
  ]

Included and Styling Marks

By default, RangeSlider.Attr.includedtrue, meaning the rail
trailing the handle will be highlighted. To have the handle act as a
discrete value, set RangeSlider.Attr.includedfalse.
To style RangeSlider.Attr.marks, include a style CSS attribute alongside the key value.

let style1 =
    [ Css.color "#77b0b1" ]
    |> DashComponentStyle.fromCssStyle

let style2 =
    [ Css.color "#f50" ]
    |> DashComponentStyle.fromCssStyle

let marks = [ 
              (0.0, RangeSlider.StyledMarkValue.init ("0°C", style1) |> RangeSlider.Mark.StyledValue)
              (26.0, RangeSlider.StyledMarkValue.init ("26°C") |> RangeSlider.Mark.StyledValue)
              (37.0, RangeSlider.StyledMarkValue.init ("37°C") |> RangeSlider.Mark.StyledValue)
              (100.0, RangeSlider.StyledMarkValue.init ("100°C", style2) |> RangeSlider.Mark.StyledValue) 
            ] |> Map.ofList

let layout =
    RangeSlider.rangeSlider "my-range-slider" [
         RangeSlider.Attr.min 0.0
         RangeSlider.Attr.max 100.0
         RangeSlider.Attr.value [ 10.0; 65.0 ]
         RangeSlider.Attr.marks marks 
    ]

Multiple Handles

To create multiple handles, define more values for RangeSlider.Attr.value.

let layout =
    RangeSlider.rangeSlider "my-range-slider" [ 
        RangeSlider.Attr.min 0.0
        RangeSlider.Attr.max 30.0
        RangeSlider.Attr.value [ 1.0; 3.0; 4.0; 5.0; 12.0; 17.0 ] 
    ]

Pushable Handles

The RangeSlider.Attr.pushable property is either a bool or a numerical value.
The numerical value determines the minimum distance between
the handles. Try moving the handles around!

let layout =
    RangeSlider.rangeSlider "my-range-slider" [ 
        RangeSlider.Attr.min 0.0
        RangeSlider.Attr.max 30.0
        RangeSlider.Attr.value [ 8.0; 10.0; 15.0; 17.0; 20.0 ]
        RangeSlider.Attr.pushable 2.0 
    ]

Non-Crossing Handles

To prevent handles from crossing each other, set RangeSlider.Attr.allowCrossfalse.

let layout =
    RangeSlider.rangeSlider "my-range-slider" [ 
      RangeSlider.Attr.min 0.0
      RangeSlider.Attr.max 30.0
      RangeSlider.Attr.value [ 10.0; 15.0 ]
      RangeSlider.Attr.allowCross true 
    ]

Non-Linear Slider and Updatemode

Create a logarithmic slider by setting RangeSlider.Attr.marks to be logarithmic and
adjusting the slider’s output RangeSlider.Attr.value in the callbacks. The RangeSlider.Attr.updatemode
property allows us to determine when we want a callback to be triggered.
The following example has RangeSlider.Attr.updatemode RangeSlider.UpdateOn.Drag which means a callback is
triggered everytime the handle is moved.
Contrast the callback output with the first example on this page to see
the difference.

open Dash.NET.Suave
open Dash.NET.DCC
open Dash.NET

let markers =
    [ 0.0 .. 4.0 ]
    |> Seq.map (fun x -> x, 10.0 ** x |> string |> RangeSlider.Mark.Value)
    |> Map.ofSeq

let layout =
    Html.div [ 
        Attr.children [ 
            RangeSlider.rangeSlider "non-linear-range-slider" [ 
                RangeSlider.Attr.marks markers
                RangeSlider.Attr.max 3.0
                RangeSlider.Attr.value [ 0.1; 2.0 ]
                RangeSlider.Attr.dots false
                RangeSlider.Attr.step 0.01
                RangeSlider.Attr.updatemode RangeSlider.UpdateOn.Drag 
            ] 
            Html.div[
                Attr.id "output-container-range-slider-non-linear"
                Attr.style [ Css.marginTop 20 ]
            ]
        ]
    ] 

let callback =
    let output = "output-container-range-slider-non-linear" @. Children
    Callback.singleOut (
        "non-linear-range-slider" @. Value,
        output,
        (fun (values: float list) ->
            let tValues =
                values
                |> Seq.map (fun x -> 10.0 ** x)
                |> Seq.toList
            let label =
                sprintf "Linear Value: %A, Log Value: [%.2f, %.2f]" values tValues.[0] tValues.[1]
            output => label
        )

let externalStylesheets = 
    [ "https://codepen.io/chriddyp/pen/bWLwgP.css" ]

[<EntryPoint>]
let main args =
    DashApp.initDefault ()
    |> DashApp.appendCSSLinks externalStylesheets
    |> DashApp.withLayout layout
    |> DashApp.addCallback callback

Tooltips

The RangeSlider.Attr.tooltip property can be used to display the current value. The placement parameter
of RangeSlider.TooltipOptions.init controls the position of the tooltip i.e. RangeSlider.TooltipPlacement.Left, RangeSlider.TooltipPlacement.Right, RangeSlider.TooltipPlacement.Top, RangeSlider.TooltipPlacement.Bottom and alwaysVisible true is used, then
the tooltips will show always, otherwise it will only show when hovered upon.

let tooltipOptions =
    RangeSlider.TooltipOptions.init (true, RangeSlider.TooltipPlacement.Bottom)

let layout =
    RangeSlider.rangeSlider "my-range-slider" [ 
        RangeSlider.Attr.min 0.0
        RangeSlider.Attr.max 30.0
        RangeSlider.Attr.value [ 10.0; 15.0 ]
        RangeSlider.Attr.tooltip tooltipOptions 
    ]

Styling Tooltips

New in Dash 2.15

You can customize the style of tooltips with the tooltip.style parameter. This accepts a dictionary of styles to apply. In this example, we set the text color and font size.

This example has not been ported to F# yet - showing the Python version instead.

Visit the old docs site for F# at: https://community.plotly.com/c/dash/net/26

from dash import dcc

dcc.RangeSlider(0, 30,
    value=[5, 15],
    marks=None,
    tooltip={
        "placement": "bottom",
        "always_visible": True,
        "style": {"color": "LightSteelBlue", "fontSize": "20px"},
    },
),

Transforming Tooltip Values

New in Dash 2.15

You can transform the value displayed on a tooltip using a JavaScript function by specifying the function name with the tooltip.transform parameter.

To make a custom function available in your app, add it to a file in your app’s assets folder. The function needs to be available in the window.dccFunctions namespace.

In this example, we have a function that converts temperatures in Fahrenheit to Celsius. This function is saved in assets/tooltip.js:

window.dccFunctions = window.dccFunctions || {};
window.dccFunctions.temperatureInCelsius = function(value) {
     return ((value - 32) * 5/9).toFixed(2);
}

We then pass this function name to the tooltip.transform parameter:

This example has not been ported to F# yet - showing the Python version instead.

Visit the old docs site for F# at: https://community.plotly.com/c/dash/net/26

from dash import dcc

dcc.RangeSlider(
    0,
    10,
    value=[3, 7.65],
    marks={0: "0°F", 3: "3°F", 5: "5°F", 7.65: "7.65°F", 10: "10°F"},
    tooltip={"always_visible": True, "transform": "temperatureInCelsius"},
)

Formatting Tooltips

New in Dash 2.15

You can customize the text displayed on tooltips using the tooltip.template parameter. This accepts a string, which must contain {value}. The {value} will be replaced with the string representation of the tooltip value, or with the value returned by a transform function if one was specified using tooltip.transform (see the previous section).

This example has not been ported to F# yet - showing the Python version instead.

Visit the old docs site for F# at: https://community.plotly.com/c/dash/net/26

from dash import dcc

dcc.RangeSlider(0, 30,
    value=[5, 15],
    marks=None,
    tooltip={
        "always_visible": True,
        "template": "$ {value}"
    },
),

RangeSlider Properties

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.

min (number; optional):
Minimum allowed value of the slider.

max (number; optional):
Maximum allowed value of the slider.

step (number; optional):
Value by which increments or decrements are made.

marks (record; optional):
Marks on the slider. The key determines the position (a number), and
the value determines what will show. If you want to set the style of a
specific mark point, the value should be an object which contains
style and label properties.

marks is a record with strings as keys and values of type string |
record with keys:

  • label (string; optional)

  • style (record; optional)

value (list of numbers; optional):
The value of the input.

drag_value (list of numbers; optional):
The value of the input during a drag.

allowCross (bool; optional):
allowCross could be set as true to allow those handles to cross.

pushable (bool | number; optional):
pushable could be set as true to allow pushing of surrounding handles
when moving an handle. When set to a number, the number will be the
minimum ensured distance between handles.

disabled (bool; optional):
If true, the handles can’t be moved.

count (number; optional):
Determine how many ranges to render, and multiple handles will be
rendered (number + 1).

dots (bool; optional):
When the step value is greater than 1, you can set the dots to true if
you want to render the slider with dots.

included (bool; optional):
If the value is true, it means a continuous value is included.
Otherwise, it is an independent value.

tooltip (record; optional):
Configuration for tooltips describing the current slider values.

tooltip is a record with keys:

  • always_visible (bool; optional):
    Determines whether tooltips should always be visible (as opposed
    to the default, visible on hover).

  • placement (a value equal to: ‘left’, ‘right’, ‘top’, ‘bottom’, ‘topLeft’, ‘topRight’, ‘bottomLeft’ or ‘bottomRight’; optional):
    Determines the placement of tooltips See
    https://github.com/react-component/tooltip#api top/bottom{*} sets
    the origin of the tooltip, so e.g. topLeft will in reality
    appear to be on the top right of the handle.

  • style (record; optional):
    Custom style for the tooltip.

  • template (string; optional):
    Template string to display the tooltip in. Must contain {value},
    which will be replaced with either the default string
    representation of the value or the result of the transform
    function if there is one.

  • transform (string; optional):
    Reference to a function in the window.dccFunctions namespace.
    This can be added in a script in the asset folder. For example,
    in assets/tooltip.js: window.dccFunctions = window.dccFunctions || {}; window.dccFunctions.multByTen = function(value) { return value * 10; } Then in the
    component tooltip={'transform': 'multByTen'}.

updatemode (a value equal to: ‘mouseup’ or ‘drag’; default 'mouseup'):
Determines when the component should update its value property. If
mouseup (the default) then the slider will only trigger its value
when the user has finished dragging the slider. If drag, then the
slider will update its value continuously as it is being dragged. Note
that for the latter case, the drag_value property could be used
instead.

vertical (bool; optional):
If true, the slider will be vertical.

verticalHeight (number; default 400):
The height, in px, of the slider if it is vertical.

className (string; optional):
Additional CSS class for the root DOM node.

id (string; optional):
The ID of this component, used to identify dash components in
callbacks. The ID needs to be unique across all of the components in
an app.

loading_state (record; optional):
Object that holds the loading state object coming from dash-renderer.

loading_state is a record with keys:

  • component_name (string; optional):
    Holds the name of the component that is loading.

  • is_loading (bool; optional):
    Determines if the component is loading or not.

  • prop_name (string; optional):
    Holds which property is loading.

persistence (bool | string | number; optional):
Used to allow user interactions in this component to be persisted when
the component - or the page - is refreshed. If persisted is truthy
and hasn’t changed from its previous value, a value that the user
has changed while using the app will keep that change, as long as the
new value also matches what was given originally. Used in
conjunction with persistence_type.

persisted_props (list of values equal to: ‘value’; default ['value']):
Properties whose user interactions will persist after refreshing the
component or the page. Since only value is allowed this prop can
normally be ignored.

persistence_type (a value equal to: ‘local’, ‘session’ or ‘memory’; default 'local'):
Where persisted user changes will be stored: memory: only kept in
memory, reset on page refresh. local: window.localStorage, data is
kept after the browser quit. session: window.sessionStorage, data is
cleared once the browser quit.