Vue

by Diego Vieira

HTML

<div id="app">
  <input type="range" v-model="range" min="0" max="5" step="1">  
  <div class="conteudo">
    <div class="caixinha" v-show="showMe(1)"></div>
    <div class="caixinha" v-show="showMe(1)"></div>
    <div class="caixinha" v-show="showMe(2)"></div>
    <div class="caixinha" v-show="showMe(4)"></div>
    <div class="caixinha" v-show="showMe(0)"></div>
    <div class="caixinha" v-show="showMe(1)"></div>
    <div class="caixinha" v-show="showMe(5)"></div>
    <div class="caixinha" v-show="showMe(0)"></div>
    <div class="caixinha" v-show="showMe(2)"></div>
    <div class="caixinha" v-show="showMe(0)"></div>
    <div class="caixinha" v-show="showMe(1)"></div>
    <div class="caixinha" v-show="showMe(0)"></div>
    <div class="caixinha" v-show="showMe(2)"></div>
    <div class="caixinha" v-show="showMe(3)"></div>
    <div class="caixinha" v-show="showMe(4)"></div>
    <div class="caixinha" v-show="showMe(2)"></div>
    <div class="caixinha" v-show="showMe(0)"></div>
    <div class="caixinha" v-show="showMe(4)"></div>
  </div>
</div>

SCSS

body {
  background: #20262E;
  padding: 20px;
  font-family: 'Helvetica';
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 8px;
  transition: all 0.2s;

  .conteudo {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: auto auto auto;

    .caixinha {
      height: 64px;
      background: #000;
    }
  }
}

Vue

new Vue({
  el: "#app",
  data: {
    range: 0
  },
  methods: {
  	showMe: function(_value) {
    	return _value >= this.range
    }
  }
})