Skip to content

Range Slider

marimo.ui.range_slider

range_slider(start: Optional[Numeric] = None, stop: Optional[Numeric] = None, step: Optional[Numeric] = None, value: Optional[Sequence[Numeric]] = None, debounce: bool = False, orientation: Literal['horizontal', 'vertical'] = 'horizontal', show_value: bool = False, steps: Optional[Sequence[Numeric]] = None, *, label: str = '', on_change: Optional[Callable[[Sequence[Numeric]], None]] = None, full_width: bool = False, disabled: bool = False)

Bases: UIElement[list[Numeric], Sequence[Numeric]]

A numeric slider for specifying a range over an interval.

Example
range_slider = mo.ui.range_slider(
    start=1, stop=10, step=2, value=[2, 6]
)

Or from a dataframe series:

range_slider = mo.ui.range_slider.from_series(df["column_name"])

Or using numpy arrays:

import numpy as np

steps = np.array([1, 2, 3, 4, 5])
# linear steps
range_slider = mo.ui.range_slider(steps=steps)
# log steps
log_range_slider = mo.ui.range_slider(steps=np.logspace(0, 3, 4))
# power steps
power_range_slider = mo.ui.range_slider(steps=np.power([1, 2, 3], 2))
ATTRIBUTE DESCRIPTION
value

The current range value of the slider.

TYPE: list[Numeric]

start

The minimum value of the interval.

TYPE: Numeric

stop

The maximum value of the interval.

TYPE: Numeric

step

The slider increment.

TYPE: Optional[Numeric]

steps

List of steps.

TYPE: Optional[Sequence[Numeric]]

PARAMETER DESCRIPTION
start

The minimum value of the interval.

TYPE: Optional[Numeric] DEFAULT: None

stop

The maximum value of the interval.

TYPE: Optional[Numeric] DEFAULT: None

step

The slider increment.

TYPE: Optional[Numeric] DEFAULT: None

value

Default value.

TYPE: Optional[Sequence[Numeric]] DEFAULT: None

debounce

Whether to debounce the slider to only send the value on mouse-up or drag-end.

TYPE: bool DEFAULT: False

orientation

The orientation of the slider, either "horizontal" or "vertical".

TYPE: Literal['horizontal', 'vertical'] DEFAULT: 'horizontal'

show_value

Whether to display the current value of the slider.

TYPE: bool DEFAULT: False

steps

List of steps to customize the slider, mutually exclusive with start, stop, and step.

TYPE: Optional[Sequence[Numeric]] DEFAULT: None

label

Markdown label for the element.

TYPE: str DEFAULT: ''

on_change

Optional callback to run when this element's value changes.

TYPE: Optional[Callable[[Sequence[Numeric]], None]] DEFAULT: None

full_width

Whether the input should take up the full width of its container.

TYPE: bool DEFAULT: False

disabled

Whether the slider is disabled. Defaults to False.

TYPE: bool DEFAULT: False

METHOD DESCRIPTION
from_series

DataFrameSeries, **kwargs: Any) -> range_slider: Create a range slider from a dataframe series.

start instance-attribute

start: Numeric

step instance-attribute

step: Optional[Numeric]

steps instance-attribute

steps: Optional[Sequence[Numeric]]

stop instance-attribute

stop: Numeric

text property

text: str

A string of HTML representing this element.

value property writable

value: T

The element's current value.

batch

batch(**elements: UIElement[JSONType, object]) -> batch

Convert an HTML object with templated text into a UI element.

This method lets you create custom UI elements that are represented by arbitrary HTML.

Example
user_info = mo.md(
    '''
    - What's your name?: {name}
    - When were you born?: {birthday}
    '''
).batch(name=mo.ui.text(), birthday=mo.ui.date())

In this example, user_info is a UI Element whose output is markdown and whose value is a dict with keys 'name' and 'birthday' (and values equal to the values of their corresponding elements).

PARAMETER DESCRIPTION
elements

the UI elements to interpolate into the HTML template.

TYPE: UIElement[JSONType, object] DEFAULT: {}

callout

callout(kind: Literal['neutral', 'danger', 'warn', 'success', 'info'] = 'neutral') -> Html

Create a callout containing this HTML element.

A callout wraps your HTML element in a raised box, emphasizing its importance. You can style the callout for different situations with the kind argument.

Examples:

mo.md("Hooray, you did it!").callout(kind="success")
mo.md("It's dangerous to go alone!").callout(kind="warn")

center

center() -> Html

Center an item.

Example
mo.md("# Hello, world").center()
RETURNS DESCRIPTION
Html

An Html object.

form

form(label: str = '', *, bordered: bool = True, loading: bool = False, submit_button_label: str = 'Submit', submit_button_tooltip: Optional[str] = None, submit_button_disabled: bool = False, clear_on_submit: bool = False, show_clear_button: bool = False, clear_button_label: str = 'Clear', clear_button_tooltip: Optional[str] = None, validate: Optional[Callable[[Optional[JSONType]], Optional[str]]] = None, on_change: Optional[Callable[[Optional[T]], None]] = None) -> form[S, T]

Create a submittable form out of this UIElement.

Creates a form that gates submission of a UIElement's value until a submit button is clicked. The form's value is the value of the underlying element from the last submission.

Examples:

Convert any UIElement into a form:

prompt = mo.ui.text_area().form()

Combine with HTML.batch to create a form made out of multiple UIElements:

form = (
    mo.ui.md(
        '''
    **Enter your prompt.**

    {prompt}

    **Choose a random seed.**

    {seed}
    '''
    )
    .batch(
        prompt=mo.ui.text_area(),
        seed=mo.ui.number(),
    )
    .form()
)

PARAMETER DESCRIPTION
label

A text label for the form.

TYPE: str DEFAULT: ''

bordered

Whether the form should have a border.

TYPE: bool DEFAULT: True

loading

Whether the form should be in a loading state.

TYPE: bool DEFAULT: False

submit_button_label

The label of the submit button.

TYPE: str DEFAULT: 'Submit'

submit_button_tooltip

The tooltip of the submit button.

TYPE: Optional[str] DEFAULT: None

submit_button_disabled

Whether the submit button should be disabled.

TYPE: bool DEFAULT: False

clear_on_submit

Whether the form should clear its contents after submitting.

TYPE: bool DEFAULT: False

show_clear_button

Whether the form should show a clear button.

TYPE: bool DEFAULT: False

clear_button_label

The label of the clear button.

TYPE: str DEFAULT: 'Clear'

clear_button_tooltip

The tooltip of the clear button.

TYPE: Optional[str] DEFAULT: None

validate

A function that takes the form's value and returns an error message if invalid, or None if valid.

TYPE: Optional[Callable[[Optional[JSONType]], Optional[str]]] DEFAULT: None

on_change

Optional callback to run when this element's value changes. Defaults to None.

TYPE: Optional[Callable[[Optional[T]], None]] DEFAULT: None

from_series staticmethod

from_series(series: DataFrameSeries, **kwargs: Any) -> range_slider

Create a range slider from a dataframe series.

left

left() -> Html

Left-justify.

Example
mo.md("# Hello, world").left()
RETURNS DESCRIPTION
Html

An Html object.

right

right() -> Html

Right-justify.

Example
mo.md("# Hello, world").right()
RETURNS DESCRIPTION
Html

An Html object.

send_message

send_message(message: dict[str, object], buffers: Optional[Sequence[bytes]]) -> None

Send a message to the element rendered on the frontend from the backend.

style

style(style: Optional[dict[str, Any]] = None, **kwargs: Any) -> Html

Wrap an object in a styled container.

Example
mo.md("...").style({"max-height": "300px", "overflow": "auto"})
mo.md("...").style(max_height="300px", overflow="auto")
PARAMETER DESCRIPTION
style

an optional dict of CSS styles, keyed by property name

TYPE: Optional[dict[str, Any]] DEFAULT: None

**kwargs

CSS styles as keyword arguments

TYPE: Any DEFAULT: {}