Skip to content

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


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  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", margin=me.Margin.all(15)
    )
  ):
    me.input(
      label="Slider value",
      appearance="outline",
      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