Lenra Docs
Register on Lenra
  • Home
  • Getting started
    Open/Close
  • Guides
    Open/Close
  • Features
    Open/Close
  • References
    Open/Close
  • Contribute

    Slider

    The slider component can be used to select from a range of values.

    A certain amount of divisions can be set for the slider using the divisions property. Then, the min and max properties need to be set to define the values of the slider. For example, in the case of a slider ranging from 1 to 10 the number of divisions would be 10 and the min and max properties would be respectively set to 1 and 10.

    This component defines 3 types of listener. onChanged that is called when the value of the slider changes. onChangeStart called when the handle of the slider is pressed. onChangeEnd called when the handle of the slider is released.

    Examples

    Slider ranging from 1 to 10

    For this example, the data should contain the slider value and the onChanged listener should properly change that value.

    {
        "type": "slider",
        "value": data["slider"],
        "divisions": 10,
        "label": data["slider"],
        "min": 1,
        "max": 10,
        "onChanged": {
            "code": "changeSliderValue",
        }
    }
    

    Properties

    AttributeDescriptionType
    _typeThe identifier of the component
    • slider
    autofocusWhether the slider should be focused initially.boolean
    divisionsThe number of divisions to show on the slider.number
    labelThe label of the slider.string
    maxThe maximum value of the slider.number
    • 1
    minThe minimum value of the slider.number
    nameThe name that will be used in the form.string
    onChangedThe callback to be invoked when the slider value changes.Listener
    onChangeEndThe callback to be invoked when the slider is released.Listener
    onChangeStartThe callback to be invoked when the slider is pressed.Listener
    styleElement of type SliderStyleSliderStyle
    valueThe current value of the slider.number