Dynamic Slider

  • Hello. Any way to use v-if or add/remove slide slots to a q-slider after its creation?

  • Admin

    I think Jon answered this on Gitter. Got an idea how to make this dynamic though. Will try it out soon.

  • Hey there,

    I’m relatively new to this framework (started using it two days ago) and as I learn new stuff I like to write simple applications, in this case a time tracker. I stumbled upon this question when I tried to add slides dynamically. After looking at the source files I had an idea for an easy solution to add slides after its creation, this should also work with the v-if directive.

    What I wanted to do:
    My main interface is a q-slider with two set slides wich stay visible all the time, a ‘settings’-slide and a ‘add new tracker’-slide. In between those two slides there might be multiple slides representing a single tracker from an array.

    What I did:

    // My TrackerSlider component for reference
    <q-slider ref="slider" :arrows="showArrows" dots class="text-white full-height">
        //That's the settings slide, no magic here
        <div slot="slide" class="bg-tertiary centered">
            <button class="primary circular big"><i @click="someMethod()">history</i></button>
            <button class="primary circular big"><i @click="someMethod()">settings</i></button>
        //Here come the dynamic slides
        <tracker-slide slot="slide" :tracker="tracker" v-for="tracker in trackers"></tracker-slide>
        ///The other 'static' slide
        <div slot="slide" class="bg-tertiary centered">
            <button class="primary circular big"><i @click="addTracker()">add</i></button>
    // And my script
    export default {
    data () {
        return {
            trackers: []
    methods: {
        addTracker () {
        // Here I'm adding a new tracker to the array, q-slider get's a little nervous here
                title: 'Work',
                start: 0,
                end: 0,
                paused: 0,
                breaks: []
          // Here I inform the component of how many slides should be there (two fixed + how many trackers there are)
          this.$refs.slider.slidesNumber = this.trackers.length + 2

    This solution is simple, but it seems to work when you know how many slides you try to show

  • Admin

    @moritzewert upgrade to Quasar v0.13.2. No need to manually set slidesNumber anymore.

  • @rstoenescu cool, thanks for the update

Log in to reply