Netflix like slider

Slider.vue

<template>
  <div>
    <div class="slider">
      <slot></slot>
    </div>
    <span
      style="position:absolute;top:45%;left:-1%;font-size:30px;cursor:pointer;background:grey;border-radius:100px;width:40px;text-align:center;padding-right:5px"
      @click="left()"
    >
      <i class="fas fa-angle-left" style="color:white"></i>
    </span>
    <span
      style="position:absolute;top:45%;right:-1%;font-size:30px;cursor:pointer;background:grey;border-radius:100px;width:40px;text-align:center;padding-left:5px"
      @click="right()"
    >
      <i class="fas fa-angle-right" style="color:white"></i>
    </span>
  </div>
</template>
<script>
export default {
  props: {
    positionSlider: {
      type: Number
    }
  },
  data () {
    return {
      valueWidthBox: 294
    }
  },
  methods: {
    right () {
      let teste = document.getElementsByClassName('slider')[this.positionSlider]
      teste.scrollBy(this.valueWidthBox, 0)
    },
    left () {
      let teste = document.getElementsByClassName('slider')[this.positionSlider]
      teste.scrollBy(-this.valueWidthBox, 0)
    }
  }
}
</script>
<style scoped>
.slider {
  width: 100%;
  overflow-x: auto;
  display: flex;
  position: relative;
  padding: 30px 0px;
  box-shadow: inset -7px 0 10px -7px rgba(0, 0, 0, 0.9);
}
.slider::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

.slider::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}

.slider::-webkit-scrollbar-thumb {
  background-color: #0079be;

  background-image: -webkit-gradient(
    linear,
    0 0,
    0 100%,
    color-stop(0.5, rgba(255, 255, 255, 0.2)),
    color-stop(0.5, transparent),
    to(transparent)
  );
}
</style>