Tutorial EzLang Slider

The slider allows a user to choose a numerical value by dragging the slider left or right (using keyboard or mouse). A slider has a value, a minimum value, a maximum value, and a step value. The step value determines the minimum amount by which the value can be adjusted. A slider with min 0, max 20, and step 5, has 5 possible values (0, 5, 10 , 15, 20). If you manually set the slider value, make sure the new value is a multiple of the step value.

The slider becomes useful by binding an 'on_value_change' callback to it. We will discuss callbacks in detail in the scheduler chapter, but we'll show an example here.

Here are a few cropped examples with screenshots (see 'examples' for the full functional EzLang/code):

Regular slider

// This is a regular slider
- Label:
    text: Regular:
    auto_scale: true, true
    padding_right: 1
- Slider:
    min: 0
    max: 100
    step: 5
    value: 50
    padding_bottom: 1
    selection_order: 1
    auto_scale: true, true

Disabled slider

// This is a disabled slider
- Label:
    text: Disabled:
    auto_scale: true, true
    padding_right: 1
- Slider:
    min: 0
    max: 100
    step: 5
    disabled: true
    value: 50
    padding_bottom: 1
    selection_order: 2
    auto_scale: true, true

Slider with hovering value label

// This is a slider with a hovering value label
- Label:
    text: With label:
    auto_scale: true, true
    padding_right: 1
- Layout:
    mode: float
    auto_scale: true, true

    - Label:
        id: my_label
        text: parent.label_slider.value
        x: ( parent.label_slider.width - 1 ) * (parent.label_slider.value / (parent.label_slider.max - parent.label_slider.min))
        y: 0
        auto_scale: true, true
    - Slider:
        id: label_slider
        pos: 0, 1
        min: 0
        max: 100
        step: 5
        value: 50
        padding_bottom: 1
        selection_order: 3
        auto_scale: true, true

Slider with synced text input

// This is a slider with a synced text input; the user can use either one to set the value
- Label:
    text: With text input:
    auto_scale: true, true
    padding_right: 1
- Layout:
    mode: box
    orientation: horizontal
    auto_scale: true, true
    - Slider:
        id: input_slider
        min: 0
        max: 100
        step: 5
        value: 50
        padding_bottom: 1
        selection_order: 4
        auto_scale: true, true
        padding_right: 1

    - TextInput:
        id: my_input
        text: parent.input_slider.value
        size_hint_x: none
        width: 4
        max_length: 3

let sync_slider_callback = |context: Context| {

    let input_state = context.state_tree.get_mut("my_input")
        .as_text_input_mut();
    let mut value = input_state.get_text();
    if value.is_empty() {
        return false
    }

    let slider_state = context.state_tree.get_mut("input_slider")
        .as_slider_mut();
    match value.trim().parse() {
        Ok(i) => {
            if i != slider_state.get_value() {
                slider_state.set_value(i);
                slider_state.update(context.scheduler);
            }
        },
        Err(_) => {
            let old_value = slider_state.get_value();
            let input_state = context.state_tree.get_mut("my_input")
                .as_text_input_mut();
            input_state.set_text(old_value.to_string());
            input_state.update(context.scheduler);
        }
    }
    false
};

Continue

The general tutorial continues with: EzLang Canvas.