Sliders
To support proper typechecks, we have multiple slider (all wrapping the ipyvuetify sliders).
SliderInt
Slider for controlling an integer value.
@solara.value_component(int)
def SliderInt(
label: str,
value: Union[int, solara.Reactive[int]] = 0,
min: int = 0,
max: int = 10,
step: int = 1,
on_value: Optional[Callable[[int], None]] = None,
thumb_label: Union[bool, Literal["always"]] = True,
tick_labels: Union[List[str], Literal["end_points"], bool] = False,
disabled: bool = False,
):
...
Basic example:
import solara
int_value = solara.reactive(42)
@solara.component
def Page():
solara.SliderInt("Some integer", value=int_value, min=-10, max=120)
solara.Markdown(f"**Int value**: {int_value.value}")
with solara.Row():
solara.Button("Reset", on_click=lambda: int_value.set(42))
42
Int value: 42
Live output
Arguments
label: Label to display next to the slider.value: The currently selected value.min: Minimum value.max: Maximum value.step: Step size.on_value: Callback to call when the value changes.thumb_label: Show a thumb label when sliding (True), always ("always"), or never (False).tick_labels: Show tick labels corresponding to the values (True), custom tick labels by passing a list of strings, only end_points ("end_points"), or no labels at all (False, the default).disabled: Whether the slider is disabled.
SliderRangeInt
Slider for controlling a range of integer values.
@solara.value_component(None)
def SliderRangeInt(
label: str,
value: Union[Tuple[int, int], solara.Reactive[Tuple[int, int]]] = (1, 3),
min: int = 0,
max: int = 10,
step: int = 1,
on_value: Callable[[Tuple[int, int]], None] = None,
thumb_label: Union[bool, Literal["always"]] = True,
tick_labels: Union[List[str], Literal["end_points"], bool] = False,
disabled: bool = False,
) -> reacton.core.ValueElement[ipyvuetify.RangeSlider, Tuple[int, int]]:
...
Basic example:
import solara
int_range = solara.reactive((0, 42))
@solara.component
def Page():
solara.SliderRangeInt("Some integer range", value=int_range, min=-10, max=120)
solara.Markdown(f"**Int range value**: {int_range.value}")
with solara.Row():
solara.Button("Reset", on_click=lambda: int_range.set((0, 42)))
0
42
Int range value: (0, 42)
Live output
Arguments
label: Label to display next to the slider.value: The currently selected value.min: Minimum value.max: Maximum value.step: Step size.on_value: Callback to call when the value changes.thumb_label: Show a thumb label when sliding (True), always ("always"), or never (False).tick_labels: Show tick labels corresponding to the values (True), custom tick labels by passing a list of strings, only end_points ("end_points"), or no labels at all (False, the default).disabled: Whether the slider is disabled.
SliderFloat
Slider for controlling a float value.
@solara.value_component(float)
def SliderFloat(
label: str,
value: Union[float, solara.Reactive[float]] = 0,
min: float = 0,
max: float = 10.0,
step: float = 0.1,
on_value: Callable[[float], None] = None,
thumb_label: Union[bool, Literal["always"]] = True,
tick_labels: Union[List[str], Literal["end_points"], bool] = False,
disabled: bool = False,
):
...
Basic example:
import solara
float_value = solara.reactive(42.4)
@solara.component
def Page():
solara.SliderFloat("Some integer", value=float_value, min=-10, max=120)
solara.Markdown(f"**Float value**: {float_value.value}")
with solara.Row():
solara.Button("Reset", on_click=lambda: float_value.set(42.5))
42.4
Float value: 42.4
Live output
Arguments
label: Label to display next to the slider.value: The current value.min: The minimum value.max: The maximum value.step: The step size.on_value: Callback to call when the value changes.thumb_label: Show a thumb label when sliding (True), always ("always"), or never (False).tick_labels: Show tick labels corresponding to the values (True), custom tick labels by passing a list of strings, only end_points ("end_points"), or no labels at all (False, the default).disabled: Whether the slider is disabled.
SliderRangeFloat
Slider for controlling a range of float values.
@solara.value_component(None)
def SliderRangeFloat(
label: str,
value: Union[Tuple[float, float], solara.Reactive[Tuple[float, float]]] = (1.0, 3.0),
min: float = 0.0,
max: float = 10.0,
step: float = 0.1,
on_value: Callable[[Tuple[float, float]], None] = None,
thumb_label: Union[bool, Literal["always"]] = True,
tick_labels: Union[List[str], Literal["end_points"], bool] = False,
disabled: bool = False,
) -> reacton.core.ValueElement[ipyvuetify.RangeSlider, Tuple[float, float]]:
...
Basic example:
import solara
float_range = solara.reactive((0.1, 42.4))
@solara.component
def Page():
solara.SliderRangeFloat("Some float range", value=float_range, min=-10, max=120)
solara.Markdown(f"**Float range value**: {float_range.value}")
with solara.Row():
solara.Button("Reset", on_click=lambda: float_range.set((0.1, 42.4)))
0.1
42.4
Float range value: (0.1, 42.4)
Live output
Arguments
label: Label to display next to the slider.value: The current value.min: The minimum value.max: The maximum value.step: The step size.on_value: Callback to call when the value changes.thumb_label: Show a thumb label when sliding (True), always ("always"), or never (False).tick_labels: Show tick labels corresponding to the values (True), custom tick labels by passing a list of strings, only end_points ("end_points"), or no labels at all (False, the default).disabled: Whether the slider is disabled.
SliderValue
Slider for selecting a value from a list of values.
@solara.value_component(None)
def SliderValue(
label: str,
value: Union[T, solara.Reactive[T]],
values: List[T],
on_value: Callable[[T], None] = None,
disabled: bool = False,
) -> reacton.core.ValueElement[ipyvuetify.Slider, T]:
...
Basic example:
import solara
foods = ["Kiwi", "Banana", "Apple"]
food = solara.reactive("Banana")
@solara.component
def Page():
solara.SliderValue(label="Food", value=food, values=foods)
solara.Markdown(f"**Selected**: {food.value}")
Kiwi
Banana
Apple
Selected: Banana
Live output
Arguments
label: Label to display next to the slider.value: The currently selected value.values: List of values to select from.on_value: Callback to call when the value changes.disabled: Whether the slider is disabled.
SliderDate
Slider for controlling a date value.
@solara.value_component(date)
def SliderDate(
label: str,
value: Union[date, solara.Reactive[date]] = date(2010, 7, 28),
min: date = date(1981, 1, 1),
max: date = date(2050, 12, 30),
on_value: Callable[[date], None] = None,
disabled: bool = False,
):
...
Basic example:
import solara
import datetime
date_value = solara.reactive(datetime.date(2010, 7, 28))
@solara.component
def Page():
solara.SliderDate("Some date", value=date_value)
solara.Markdown(f"**Date value**: {date_value.value.strftime('%Y-%b-%d')}")
with solara.Row():
solara.Button("Reset", on_click=lambda: date_value.set(datetime.date(2010, 7, 28)))
2000-mmm-99
2010-Jul-28
Date value: 2010-Jul-28
Live output
Arguments
label: Label to display next to the slider.value: The current value.min: The minimum value.max: The maximum value.on_value: Callback to call when the value changes.disabled: Whether the slider is disabled.