VueJS - How to customize a vue-slider-component's slider bar?

Question

I am new to Vue js and I am working with the vue-slider-component. I want to design the slider in a triangular form like below.

I want to know how to customize the slider bar into this particular shape. Thanks in advance.

        <vue-slider
          v-model="SliderValue"
          @change="SliderChange"
          class="horizontal-slider"
          :dotSize="45"
          width="300px"
          height="13px"
          :max="100"
          :min="0"
        />