ui.input_slider

ui.input_slider(
    id
    label
    min
    max
    value
    *
    step=None
    ticks=False
    animate=False
    width=None
    sep=','
    pre=None
    post=None
    time_format=None
    timezone=None
    drag_range=True
)

Constructs a slider widget to select a number, date, or date-time from a range.

Parameters

id : str

An input id.

label : TagChild

An input label.

min : SliderValueArg

The minimum allowed value.

max : SliderValueArg

The maximum allowed value.

value : SliderValueArg | Iterable[SliderValueArg]

Initial value.

step : Optional[SliderStepArg] = None

Interval to use when stepping between min and max.

ticks : bool = False

False to hide tick marks, True to show them according to some simple heuristics.

animate : bool | AnimationOptions = False

True to show simple animation controls with default settings; False not to; or a custom settings list, such as those created using AnimationOptions.

width : Optional[str] = None

The CSS width, e.g. ‘400px’, or ‘100%’

sep : str = ','

Separator between thousands places in numbers.

pre : Optional[str] = None

A prefix string to put in front of the value.

post : Optional[str] = None

A suffix string to put after the value.

time_format : Optional[str] = None

Only used if the slider values are date or datetime objects. A time format string, to be passed to the Javascript strftime library. See https://github.com/samsonjs/strftime for more details. For Dates, the default is “%F” (like “2015-07-01”), and for Datetimes, the default is “%F %T” (like “2015-07-01 15:32:10”).

timezone : Optional[str] = None

Only used if the values are datetime objects. A string specifying the time zone offset for the displayed times, in the format “+HHMM” or “-HHMM”. If None (the default), times will be displayed in the browser’s time zone. The value “+0000” will result in UTC time.

drag_range : bool = True

This option is used only if it is a range slider (with two values). If True (the default), the range can be dragged. In other words, the min and max can be dragged together. If False, the range cannot be dragged.

Returns

: Tag

A UI element

Notes

Server value

A number, date, or date-time (depending on the class of value), or in the case of slider range, a tuple of two numbers/dates/date-times.

See Also

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
import matplotlib.pyplot as plt
import numpy as np

from shiny import App, Inputs, Outputs, Session, render, ui

app_ui = ui.page_fluid(
    ui.input_slider("obs", "Number of bins:", min=10, max=100, value=30),
    ui.output_plot("distPlot"),
)


def server(input: Inputs, output: Outputs, session: Session):
    @render.plot
    def distPlot():
        np.random.seed(19680801)
        x = 100 + 15 * np.random.randn(437)

        fig, ax = plt.subplots()
        ax.hist(x, input.obs(), density=True)
        return fig


app = App(app_ui, server)