improve volume control style

src/shared/components/Icon.vue

@@ -27,8 +27,8 @@
     BIconPersonFill,
     BIconRss,
     BIconX,
-    BIconVolumeUpFill,
     BIconVolumeMuteFill,
+    BIconVolumeUpFill,
   } from 'bootstrap-vue'
 
   export default Vue.extend({
@@ -56,8 +56,8 @@
       BIconPersonFill,
       BIconRss,
       BIconX,
-      BIconVolumeUpFill,
       BIconVolumeMuteFill,
+      BIconVolumeUpFill,
     },
     props: {
       icon: { type: String, required: true }

src/shared/components/Slider.vue

@@ -0,0 +1,54 @@
+<template>
+  <VueSlider
+    v-bind="$attrs"
+    :value="value"
+    :min="min"
+    :max="max"
+    :interval="step"
+    :tooltip-formatter="formatter"
+    @change="onInput"
+  />
+</template>
+<style>
+  @import '~vue-slider-component/theme/default.css';
+  .vue-slider-rail {
+    background-color: var(--secondary) !important;
+  }
+  .vue-slider-process {
+    background-color: var(--primary) !important;
+  }
+  .vue-slider-dot-tooltip-inner {
+    background-color: var(--primary);
+    border-color: var(--primary);
+  }
+  .vue-slider-dot-handle {
+    background-color: var(--text-body);
+  }
+</style>
+<script lang="ts">
+  import Vue from 'vue'
+  import VueSlider from 'vue-slider-component'
+
+  export default Vue.extend({
+    components: {
+      VueSlider,
+    },
+    props: {
+      value: { type: Number, required: true },
+      min: { type: Number, required: true },
+      max: { type: Number, required: true },
+      step: { type: Number, required: true },
+      percent: { type: Boolean, default: false },
+    },
+    methods: {
+      onInput(value: number) {
+        this.$emit('input', value)
+      },
+      formatter(value: number) {
+        return this.percent
+          ? `${Math.round(((value - this.min) * 100) / (this.max - this.min))}%`
+          : `${value}`
+      }
+    }
+  })
+</script>

src/shared/components/index.ts

@@ -4,6 +4,7 @@ import ExternalLink from './ExternalLink.vue'
 import Icon from './Icon.vue'
 import InfiniteLoader from './InfiniteLoader.vue'
 import OverflowMenu from './OverflowMenu.vue'
+import Slider from './Slider.vue'
 import Tiles from './Tiles.vue'
 import Tile from './Tile.vue'
 import {
@@ -16,6 +17,7 @@ import {
   BFormTextarea,
   BModal,
   BOverlay,
+  BPopover,
   BProgress,
   BSidebar,
   DropdownPlugin,
@@ -30,6 +32,7 @@ Vue.component('BFormInput', BFormInput)
 Vue.component('BFormCheckbox', BFormCheckbox)
 Vue.component('BFormTextarea', BFormTextarea)
 Vue.component('BButton', BButton)
+Vue.component('BPopover', BPopover)
 Vue.component('BProgress', BProgress)
 Vue.component('BOverlay', BOverlay)
 Vue.use(DropdownPlugin)
@@ -40,6 +43,7 @@ const components = {
   Icon,
   InfiniteLoader,
   OverflowMenu,
+  Slider,
   Tiles,
   Tile,
 }