Slider

Sliders allow users to quickly select a value within a fixed range and should be used when the range’s upper and lower bounds are constant.

Example

from deephaven import ui


my_slider_basic = ui.slider(default_value=12, label="Cookies to buy")

Slider Basic Example

UI recommendations

Recommendations for creating sliders:

  1. Every slider should have a label specified. Without one, the slider is ambiguous. In the rare case that context is sufficient, the label is unnecessary; you must still include an aria-label via the aria_label prop.
  2. The label and contextual help text should be in sentence case.

Consider using a range_slider when users should select a subset range or a number_field when the range is large or greater precision is required.

Value

Sliders are controlled with the value prop and uncontrolled with the default_value prop. This value must fall between the slider’s minimum and maximum values, which by default are 0 and 100, respectively.

from deephaven import ui


@ui.component
def slider_value_example():
    value, set_value = ui.use_state(25)
    return [
        ui.slider(default_value=25, label="Cookies to buy (Uncontrolled)"),
        ui.slider(
            value=value, on_change=set_value, label="Cookies to buy (Controlled)"
        ),
    ]


my_slider_value_example = slider_value_example()

Scale

Setting the min_value and max_value props configures a custom scale for the slider.

The step prop changes the increments that the slider changes.

from deephaven import ui


@ui.component
def slider_range_step_examples():
    return [
        ui.slider(
            default_value=100, min_value=50, max_value=150, label="Cookies to buy"
        ),
        ui.slider(
            default_value=100,
            min_value=0,
            max_value=1000,
            step=100,
            label="Donuts to buy for group event",
        ),
    ]


my_slider_range_step_examples = slider_range_step_examples()

HTML Forms

Sliders can support a name prop for integration with HTML forms, allowing for easy identification of a value on form submission.

from deephaven import ui


my_slider_name_example = ui.form(
    ui.slider(label="Opacity", default_value=50, name="opacity")
)

Labeling

Value labels are shown above the slider by default but can be moved to the side or hidden using the label_position prop.

Note that if the label prop is set, the show_value_label is set to True by default.

from deephaven import ui


my_slider_label_example = ui.flex(
    ui.slider(label="Cookies to buy", default_value=25),
    ui.slider(label="Donuts to buy", label_position="side", default_value=25),
    ui.slider(label="Cakes to buy", show_value_label=False, default_value=25),
    direction="column",
    gap="size-500",
)

Fill

The is_filled prop can be set to fill the slider. The fill_offset prop can be set to apply an offset for the fill.

from deephaven import ui


my_slider_fill_example = ui.flex(
    ui.slider(
        label="Contrast",
        min_value=-5,
        max_value=5,
        default_value=0.75,
        step=0.05,
        is_filled=True,
    ),
    ui.slider(
        label="Exposure",
        min_value=-5,
        max_value=5,
        default_value=1.83,
        step=0.01,
        fill_offset=1,
        is_filled=True,
    ),
    direction="column",
    gap="size-300",
)

Gradient

The track_gradient prop applies a gradient to the slider’s fill.

from deephaven import ui


my_slider_gradient_example = ui.slider(
    label="Filter density",
    track_gradient=["white", "rgba(177,141,32,1)"],
    default_value=0.3,
    max_value=1,
    step=0.01,
    is_filled=True,
)

Contextual Help

To provide additional information about the slider, a UI.contextual_help can be passed into the contextual_help prop.

from deephaven import ui


my_slider_contextual_help_example = ui.slider(
    label="Exposure",
    min_value=-100,
    max_value=100,
    default_value=0,
    is_filled=True,
    fill_offset=0,
    contextual_help=ui.contextual_help(
        ui.heading("What is exposure?"),
        ui.content("Exposure adjusts how bright the image is"),
    ),
)

Disabled

Setting the is_disabled prop disables the slider.

from deephaven import ui


my_slider_disabled_example = ui.slider(
    label="Cookies to share", default_value=0, is_disabled=True
)

API Reference

Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.

Returns: Element The rendered slider component.

ParametersTypeDefaultDescription
is_filledbool |
None
NoneWhether the slider should be filled between the start of the slider and the current value.
fill_offsetfloat |
None
NoneThe offset of the filled area from the start of the slider.
track_gradientlist[str] |
None
NoneThe background of the track, specified as the stops for a CSS background: linear-gradient(to right/left, ...trackGradient).
label_positionLiteral['top', 'side']'top'The position of the label relative to the slider.
show_value_labelbool |
None
NoneWhether the value label should be displayed. True by default if the label is provided.
contextual_helpAny |
None
NoneA ContextualHelp element to place next to the label.
orientationLiteral['horizontal', 'vertical']'horizontal'The orientation of the slider.
is_disabledbool |
None
NoneWhether the slider is disabled.
min_valuefloat0The minimum value of the slider.
max_valuefloat100The maximum value of the slider.
stepfloat1The step value for the slider.
valuefloat |
None
NoneThe current value of the slider.
default_valuefloat |
None
NoneThe default value of the slider.
labelAny |
None
NoneThe content to display as the label.
namestr |
None
NoneThe name of the input element, used when submitting an HTML form.
keystr |
None
NoneA unique identifier used by React to render elements in a list.