Range Slider

marimo.ui.range_slider

range_slider(
    start: Numeric | None = None,
    stop: Numeric | None = None,
    step: Numeric | None = None,
    value: Sequence[Numeric] | None = None,
    debounce: bool = False,
    orientation: Literal[
        "horizontal", "vertical"
    ] = "horizontal",
    show_value: bool = False,
    steps: Sequence[Numeric] | None = None,
    *,
    label: str = "",
    on_change: Callable[[Sequence[Numeric]], None]
    | 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: Numeric | None
steps	List of steps. TYPE: Sequence[Numeric] | None

PARAMETER	DESCRIPTION
start	The minimum value of the interval. TYPE: Numeric | None DEFAULT: None
stop	The maximum value of the interval. TYPE: Numeric | None DEFAULT: None
step	The slider increment. TYPE: Numeric | None DEFAULT: None
value	Default value. TYPE: Sequence[Numeric] | None 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: Sequence[Numeric] | None DEFAULT: None
label	Markdown label for the element. TYPE: str DEFAULT: ''
on_change	Optional callback to run when this element's value changes. TYPE: Callable[[Sequence[Numeric]], None] | 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

Notes

Dragging the filled track (the colored bar between the two handles) moves both handles together while preserving the selected range width. Individual handles can still be dragged independently to adjust the range.

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: Numeric | None

steps instance-attribute

steps: Sequence[Numeric] | None

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: str | None = None,
    submit_button_disabled: bool = False,
    clear_on_submit: bool = False,
    show_clear_button: bool = False,
    clear_button_label: str = "Clear",
    clear_button_tooltip: str | None = None,
    validate: Callable[[Optional[JSONType]], str | None]
    | None = None,
    on_change: Callable[[Optional[T]], None] | 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.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: str | None 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: str | None DEFAULT: None
validate	A function that takes the form's value and returns an error message if invalid, or None if valid. TYPE: Callable[[Optional[JSONType]], str | None] | None DEFAULT: None
on_change	Optional callback to run when this element's value changes. Defaults to None. TYPE: Callable[[Optional[T]], None] | None DEFAULT: None

from_args classmethod

from_args(
    data: dict[str, int],
    args: InitializationArgs[S, T],
    memo: dict[int, Any] | None = None,
    basis: UIElement[S, T] | None = None,
) -> UIElement[S, T]

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.

style

style(
    style: dict[str, Any] | None = 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: dict[str, Any] | None DEFAULT: None
**kwargs	CSS styles as keyword arguments TYPE: Any DEFAULT: {}