I’m trying to extend the QSlider with an up and down button.
So, let’s call this new component: btn-slider.
This new component has following markup:
<div>
<q-btn
@click="down()"
size="md"
round
icon="remove">
</q-btn>
<q-slider ref='slider'
v-bind="$attrs" v-on="$listeners"
/>
<q-btn
@click="up()"
size="md"
:disable='disable()'
round
icon="add">
</q-btn>
</div>
As you can see, I bind all props/events to the QSlider:
<q-slider ref='slider'
v-bind="$attrs" v-on="$listeners"
/>
By doing so, all props are passed directly to the QSlider:
<div id="q-app">
<div class="q-pa-md">
<q-badge color="secondary">
Model: {{ value }}
</q-badge>
<btn-slider
v-model="value"
:min="0"
:max="20"
:step="1"
label label-always
color="light-green"
></btn-slider>
</div>
</div>
Now, the problem is that I can’t find a decent way to update the value of the QSlider when the up down button is triggered.
Please find here a codepen: https://codepen.io/paulbladel/pen/KJYPwG