Extending the QSlider with an up and down button.

[paul]

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

[paul]

ok, answered my own question : https://codepen.io/paulbladel/pen/KJYPwG
the trick is to use the sync modifier.