Extending the QSlider with an up and down button.



  • 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



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


Log in to reply