How to change the value display in the thumb of a range slider in ipyvuetify?

user_6734243 0
Viewed 115

In the vuetify documentation the following example

<v-slider
  v-model="slider"
  :thumb-size="24"
  thumb-label="always"
>
  <template v-slot:thumb-label="{ value }">
    {{ satisfactionEmojis[Math.min(Math.floor(value / 10), 9)] }}
  </template>
</v-slider>

And I try my best to adapt it to ipyvuetify:

toto = v.Slider(
    v_model=None,
    thumb_label = True,
    class_='mt-5',
    v_slots = [{
        'name': 'thumb_label',
        'variable': 'thumb.value',
        'children': 'toto'
    }]
)
toto

But my slider is till displaying numbers instead of "toto". what did I miss ? Is it even possible ?

ipywidgets vuetify.js python
1 Answers

The problem here is that you're calling the v_slot name as thumb_label, but the slot name is thumb-label indeed.

toto = v.Slider(
    v_model=None,
    thumb_label = True,
    class_='mt-5',
    v_slots = [{
        'name': 'thumb-label',
        'variable': 'thumb.value',
        'children': 'toto'
    }]
)
toto
user_89416250
Related