SeekBar.vue

<template>
    <GridLayout>
        <Label class="BackgroundBar"
               row="0"
               horizontalAlignment="left"
        />
        <Label class="Bar bg-red"
               row="0"
               horizontalAlignment="left"
               :width="x"
               :opacity="isEnabled ? 1 : .5"
        />
        <GridLayout class="Thumb"
                    row="0"
                    horizontalAlignment="left"
                    @pan="onPan"
                    :translateX="x"
        >
            <Label class="InnerThumb" />
        </GridLayout>

    </GridLayout>
</template>

<script>
const mainScreen = require('tns-core-modules/platform').screen.mainScreen;

export default {
  props: {
    progress: Number,
    isEnabled: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      prevDeltaX: 0,
      isDragging: false,
      dragProgress: 0,
      x: 0,
      max: mainScreen.widthDIPs, //- 25,
    };
  },
  computed: {
    current() {
      if (this.isDragging) {
        return this.dragProgress + 1;
      }
      return this.progress;
    },
  },
  watch: {
    current: {
      handler(value) {
        this.setProgress(value);
      },
      immediate: true,
    },
  },
  methods: {
    setProgress(value) {
      if (this.isDragging) {
        return;
      }
      if (value < 0) {
        value = 0;
      }
      if (value > 100) {
        value = 100;
      }

      this.x = value / 100 * this.max;
      this.constrainThumb();
    },
    constrainThumb() {
      if (this.x < 0) {
        this.x = 0;
      }

      if (this.x > this.max) {
        this.x = this.max;
      }
    },
    calculateDragProgress() {
      this.dragProgress = Math.ceil(100 / this.max * this.x);
    },
    onPan(args) {
      if (args.state === 1) {
        // down
        this.isDragging = true;
        this.prevDeltaX = 0;
        args.object.background = 'rgba(65, 105, 225, 0.2)';
      } else if (args.state === 2) {
        // panning
        this.x += args.deltaX - this.prevDeltaX;
        this.prevDeltaX = args.deltaX;
        this.constrainThumb();
        this.calculateDragProgress();
        this.$emit('onSeek', { value: this.dragProgress });
      } else if (args.state === 3) {
        args.object.background = 'transparent';

        // up
        this.$emit('onSeekChanged', { value: this.dragProgress });
        this.$nextTick(() => {
          this.isDragging = false;
          this.dragProgress = 0;
        });
      }
    },
  },
};
</script>

<style scoped>
.BackgroundBar {
  width: 100%;
  height: 3;
  background: #bfbfbf;
}

.Bar {
  height: 3;
  /*background: #4169e1;*/
  /*margin: 0 20;*/
}

.Thumb {
  width: 50;
  height: 50;
  border-radius: 50%;
  /*background: rgba(65, 105, 225, 0.01);*/
  background: transparent;
  margin-left: -25;
}

.InnerThumb {
  width: 15;
  height: 10;
  border-radius: 50%;
  background: white;
  border-width: 1px;
  border-color: #808080;
}
</style>