how to use the slots in Slider object of ipyvuetify?

Question

I'm using the ipyvuetify librairy to create a dashboard application. I would like to add an extra TextField as a slot to my Slider component. I followed the example given in the vuetify documentation and the slot documentation from ipyvuetify but I don't manage to make the simple "+" icon to appear.

range = v.RangeSlider(
    v_model = None,
    v_slots = [{
        'name': 'append',
        'children': [v.Icon(children=['mdi-plus'])]
    }]
)
range

What did I miss ? Is it even possible ?

Answer 1

Your example is not working because the v_model of a RangeSlider is a list.

range_ = v.RangeSlider(
    v_model = [1,2],
    min=1,
    max=10,
    v_slots = [{
        'name': 'append',
        'children': [v.Icon(children=['mdi-plus'])]
    }]
)
range_

However, as the documented v_slotbug in ipyvuetify, the slot will disappear as soon as you interact with the slider.

A workaround could be create a custom range slider with append_icon parameter (if you're looking an icon as slot).

class RangeSlider(v.RangeSlider):
    
    def __init__(self, *args, **kwargs):
        self.append_icon='mdi-plus'
        
        super().__init__(*args,**kwargs)
        
        self.on_event('click:append', self.add)
    
    def add(self, *args):
        self.v_model = [self.v_model[0]] + [self.v_model[1]+1]
        
rs=RangeSlider(min=1, max=10, v_model = [1,2])
rs

But if you're planning to include a TextField, I would create a custom Flex element with both widgets linked.