Slider

Overview

Slider allows the user to select from a range of values and is based on the Angular Material slider component.

Examples

import mesop as me


@me.stateclass
class State:
  initial_input_value: str = "50.0"
  initial_slider_value: float = 50.0
  slider_value: float = 50.0


@me.page(
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/slider",
)
def app():
  state = me.state(State)
  with me.box(style=me.Style(display="flex", flex_direction="column")):
    me.input(
      label="Slider value", value=state.initial_input_value, on_input=on_input
    )
    me.slider(on_value_change=on_value_change, value=state.initial_slider_value)
    me.text(text=f"Value: {me.state(State).slider_value}")


def on_value_change(event: me.SliderValueChangeEvent):
  state = me.state(State)
  state.slider_value = event.value
  state.initial_input_value = str(state.slider_value)


def on_input(event: me.InputEvent):
  state = me.state(State)
  state.initial_slider_value = float(event.value)
  state.slider_value = state.initial_slider_value

API

slider

Creates a Slider component.

PARAMETER	DESCRIPTION
on_value_change	An event will be dispatched each time the slider changes its value. TYPE: Callable[[SliderValueChangeEvent], Any] | None DEFAULT: None
value	Initial value. If updated, the slider will be updated with a new initial value. TYPE: float | None DEFAULT: None
min	The minimum value that the slider can have. TYPE: float DEFAULT: 0
max	The maximum value that the slider can have. TYPE: float DEFAULT: 100
step	The values at which the thumb will snap. TYPE: float DEFAULT: 1
disabled	Whether the slider is disabled. TYPE: bool DEFAULT: False
discrete	Whether the slider displays a numeric value label upon pressing the thumb. TYPE: bool DEFAULT: False
show_tick_marks	Whether the slider displays tick marks along the slider track. TYPE: bool DEFAULT: False
color	Palette color of the slider. TYPE: Literal['primary', 'accent', 'warn'] DEFAULT: 'primary'
disable_ripple	Whether ripples are disabled in the slider. TYPE: bool DEFAULT: False
style	Style for the component. TYPE: Style | None DEFAULT: None
key	The component key. TYPE: str | None DEFAULT: None

SliderValueChangeEvent dataclass

Bases: MesopEvent

Event triggered when the slider value changes.

ATTRIBUTE	DESCRIPTION
value	The new value of the slider after the change. TYPE: float
key	Key of the component that emitted this event. TYPE: str