Slider¶

Simple example:

with flx.VBox():
    flx.Slider(min=10, max=20, value=12)
    flx.RangeSlider(min=10, max=90, value=(20, 60))

open in new tab

Also see examples: sine.py, twente.py, deep_event_connections.py.

class flexx.ui.Slider(*init_args, **kwargs)¶

Inherits from: Widget

An input widget to select a value in a certain range.

The node of this widget is a <div> containing a few HTML elements for rendering. It does not use a <input type='range'> because of its different appearance and behaviour accross browsers.

properties: disabled, max, min, step, text, value

emitters: user_done, user_value

actions: set_disabled, set_max, set_min, set_step, set_text, set_value

disabled¶: BoolProp – Whether the slider is disabled.

max¶: FloatProp – The maximum slider value.

min¶: FloatProp – The minimal slider value.

set_disabled(*val)¶: action – Setter for the ‘disabled’ property.

set_max(*val)¶: action – Setter for the ‘max’ property.

set_min(*val)¶: action – Setter for the ‘min’ property.

set_step(*val)¶: action – Setter for the ‘step’ property.

set_text(*val)¶: action – Setter for the ‘text’ property.

set_value(value)¶: action – set_value

step¶: FloatProp – The step size for the slider.

text¶: StringProp – The label to display on the slider during dragging. Occurances of “{percent}” are replaced with the current percentage, and “{value}” with the current value. Default “{value}”.

user_done()¶: emitter – Event emitted when the user stops manipulating the slider. Has old_value and new_value attributes (which have the same value).

user_value(value)¶: emitter – Event emitted when the user manipulates the slider. Has old_value and new_value attributes.

value¶: FloatProp – The current slider value.

class flexx.ui.RangeSlider(*init_args, **kwargs)¶

Inherits from: Slider

An input widget to select a range (i.e having two handles instead of one).

The node of this widget is a <div> containing a few HTML elements for rendering.

properties: value

actions: set_value

set_value(*value)¶: action – Set the RangeSlider’s value. Can be called using set_value([val1, val2]) or set_value(val1, val2).

value¶: FloatPairProp – The current slider value as a two-tuple.