Cannote reproduce VRangeSlider example from vuetify

[beroda]

Hello @jourdain ,

FIrst of all, thank you very much for developing the trame framework, I really enjoyed using it so far.
The examples and documentation are well written and clear (at least for someone not familiar with web-development), it is very much appreciated 😄

I encountered a strange behavior when trying to reproduce the following Vuetify VRangeSlider example using trame.

I came up with the following python code:

from __future__ import annotations

from trame.app import get_server
from trame.ui.html import DivLayout
from trame.widgets import html
from trame.widgets import vuetify3 as vuetify

server = get_server(client_type="vue3")
state = server.state


with DivLayout(server) as layout:
    with html.Div(style="margin: 20px; padding: 20px; border: solid 1px #333;"):
        with vuetify.VRangeSlider(
            v_model=("range", [5, 8]),
            max=10,
            min=-10,
            step=1,
            style="min-width: 100px",
            thumb_label=True,
            hide_details=True,
            density="comfortable",
        ) as t:
            with vuetify.Template(
                v_slot_prepend=True,
                __properties=[("v_slot_prepend", "v-slot:prepend")],
            ):
                vuetify.VTextField(
                    v_model=("range[0]", 3),
                    density="compact",
                    style="width: 70px",
                    type="number",
                    variant="outlined",
                    hide_details=True,
                    single_line=True,
                )

            with vuetify.Template(
                v_slot_append=True,
                __properties=[("v_slot_append", "v-slot:append")],
            ):
                vuetify.VTextField(
                    v_model=("range[1]", 7),
                    density="compact",
                    style="width: 70px",
                    type="number",
                    variant="outlined",
                    hide_details=True,
                    single_line=True,
                )

            print(t)
        vuetify.VTextField(v_model=("range[0]",))


if __name__ == "__main__":
    server.start()

The printed html looks very similar to what's in the Vuetify playground:

<VRangeSlider style="min-width: 100px" v-model="range" density="comfortable" hideDetails max="10" min="-10" step="1" thumbLabel>
  <template v-slot:prepend>
    <VTextField style="width: 70px" v-model="range[0]" type="number" density="compact" hideDetails singleLine variant="outlined" />
  </template>
  <template v-slot:append>
    <VTextField style="width: 70px" v-model="range[1]" type="number" density="compact" hideDetails singleLine variant="outlined" />
  </template>
</VRangeSlider>

When updating the min/max values on the slider, the changes are correctly pushed and updated to the respective text-fields.

However, changing the values directly withing the text-fields does not update the slider values, which is correctly performed in the Vuetify example.
I tried with a simple VTextField at the end, without success.

As already said, I am not very familiar with web-development (so I might misunderstand/misuse some concepts) but it seems that the client does not push modifications to the server when using the text-fields.

Could you provide some guidance on how to fix this behavior and reproduce this example ?

Thank you in advance.

[jourdain]

Hi @beroda and welcome to the community.

So I see 2 issues in your code.

1. I'm not sure if it is still true, but when using vuetify widgets, they need to be nested within a VApp. In other word, you may want to use a vuetify layout when using vuetify widgets.
2. The actual issue you are running into is related to the fact that you use a nested structure as a model (range[0]) and when doing so, changes are not detected automatically (in trame only because we use shallow reactive structure). At that point you need an explicit call to flush on your full "range" object/array. (@update:modelValue="flushState('range')") or update the full variable.

Side note:

• You may want to use v-model.number="range[0]" which should translate in python to v_model_number="range[0]"
• You may want to type your text field too type="number"

Another way to write 2 could be as follow

v3.VTextfield(
   modelValue=("range[0]",), # check html as I'm not sure if it is modelValue or model_value
   update_modelValue="range = [Number($event), range[1]]", # check html => @update:modelValue
)

[beroda]

BTW, I could not figure out how to set decimal values inside the VTextField, despite having the type="number" kwargs.
I searched the vuetify documentation and it seems they developed a special component called v-number-input (see here) for this case.

However, it seems not available yet in trame. I am curious if you have any ideas on how to proceed ?

The VNumberInput components is available in trame-vuetify==2.6.0

[jourdain]

What I meant was either

vuetify.VTextField(
   v_model=("range[0]",),
   update_modelValue="flushState('range')",
)
# or
vuetify.VTextField(
   model_value=("range[0]",),
   update_modelValue="range[0] = $event; flushState('range')",
)

[jourdain]

Also you can also provide raw attributes like below

with vuetify.Template(raw_attrs=["v-slot:prepend"]):

[beroda]

What I meant was either

vuetify.VTextField(
   v_model=("range[0]",),
   update_modelValue="flushState('range')",
)
# or
vuetify.VTextField(
   model_value=("range[0]",),
   update_modelValue="range[0] = $event; flushState('range')",
)

On my side, neither of them work

[jourdain]

Hum ok, the v_model one was a stretch since the update was defined twice, but the second should work, although the update of the range directly is definitely nicer.

[beroda]

Concerning the VNumberInput component, I struggled a bit to use it because I did not realize it was in the Labs section of the Vuetify components.

For future people landing here, I had to add the following lines in the python imports to make it work:

from trame.widgets import vuetify3 as vuetify

vuetify.enable_lab()

Maybe a message/warning/error should be issued when trying to use labs components in trame without having enabled them previously ?

In any case, here is the updated example that works for anyone interested:

from __future__ import annotations

from trame.app import get_server
from trame.ui.html import DivLayout
from trame.ui.vuetify3 import VAppLayout
from trame.widgets import html
from trame.widgets import vuetify3 as vuetify

vuetify.enable_lab()

server = get_server(client_type="vue3")
state = server.state

range_kwargs = {
    "density": "compact",
    "type": "number",
    "variant": "outlined",
    "hide_details": True,
    "single_line": True,
    "control_variant": "stacked",
    "style": "width: 300px",
}

with VAppLayout(server) as layout:
    with html.Div(style="margin: 20px; padding: 20px; border: solid 1px #333;"):
        with vuetify.VRangeSlider(
            v_model=("range", [5, 8]),
            max=10,
            min=-10,
            style="min-width: 100px",
            thumb_label=True,
            hide_details=True,
            density="comfortable",
            step=(step := 0.01),
        ) as t:
            with vuetify.Template(
                v_slot_prepend=True,
                __properties=[("v_slot_prepend", "v-slot:prepend")],
            ):
                vuetify.VNumberInput(
                    v_model_number="range[0]",
                    update_modelValue="range = [Number($event), range[1]]",
                    **range_kwargs,
                    step=step,
                )

    print(layout)


if __name__ == "__main__":
    server.start()

(still some issues in the component VNumberInput, namely with the increase button that raises a JS Error => TypeError: (r.value + e.step).toFixed is not a function but I assume it will be fixed soon in Vuetify since it is still experimental).

[jourdain]

Try the following just it case it changes something

vuetify.VNumberInput(
   model_value=("range[0]",),
   update_modelValue="range = [Number($event), range[1]]",
   step=(step,),
   **range_kwargs,
)

[beroda]

Switching to the tuple step=(step,), indeed fixes the increase button issue, thank you