diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/FtSlider/FtSlider.css
similarity index 100%
rename from src/renderer/components/ft-slider/ft-slider.css
rename to src/renderer/components/FtSlider/FtSlider.css
diff --git a/src/renderer/components/FtSlider/FtSlider.vue b/src/renderer/components/FtSlider/FtSlider.vue
new file mode 100644
index 0000000000000..47358906f1497
--- /dev/null
+++ b/src/renderer/components/FtSlider/FtSlider.vue
@@ -0,0 +1,78 @@
+<template>
+  <label
+    class="pure-material-slider"
+    :for="id"
+  >
+    <input
+      :id="id"
+      v-model.number="currentValue"
+      :disabled="disabled"
+      type="range"
+      :min="minValue"
+      :max="maxValue"
+      :step="step"
+      @change="change"
+    >
+    <span>
+      {{ t('Display Label', {label: label, value: displayLabel}) }}
+    </span>
+  </label>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { randomUUID } from 'crypto'
+import { useI18n } from '../../composables/use-i18n-polyfill'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  defaultValue: {
+    type: Number,
+    required: true
+  },
+  minValue: {
+    type: Number,
+    required: true
+  },
+  maxValue: {
+    type: Number,
+    required: true
+  },
+  step: {
+    type: Number,
+    required: true
+  },
+  valueExtension: {
+    type: String,
+    default: null
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['change'])
+
+const id = randomUUID()
+const currentValue = ref(props.defaultValue)
+
+const displayLabel = computed(() => {
+  if (props.valueExtension === null) {
+    return currentValue.value
+  } else {
+    return `${currentValue.value}${props.valueExtension}`
+  }
+})
+
+function change() {
+  emit('change', currentValue.value)
+}
+
+</script>
+<style scoped src="./FtSlider.css" />
diff --git a/src/renderer/components/ThemeSettings.vue b/src/renderer/components/ThemeSettings.vue
index 9b8558487b915..c1b0c7989c585 100644
--- a/src/renderer/components/ThemeSettings.vue
+++ b/src/renderer/components/ThemeSettings.vue
@@ -100,7 +100,7 @@ import { useI18n } from '../composables/use-i18n-polyfill'
 import FtSettingsSection from './FtSettingsSection/FtSettingsSection.vue'
 import FtSelect from './ft-select/ft-select.vue'
 import FtToggleSwitch from './ft-toggle-switch/ft-toggle-switch.vue'
-import FtSlider from './ft-slider/ft-slider.vue'
+import FtSlider from './FtSlider/FtSlider.vue'
 import FtFlexBox from './ft-flex-box/ft-flex-box.vue'
 import FtPrompt from './FtPrompt/FtPrompt.vue'
 
diff --git a/src/renderer/components/ft-slider/ft-slider.js b/src/renderer/components/ft-slider/ft-slider.js
deleted file mode 100644
index 55e921082b03a..0000000000000
--- a/src/renderer/components/ft-slider/ft-slider.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'FtSlider',
-  props: {
-    label: {
-      type: String,
-      required: true
-    },
-    defaultValue: {
-      type: Number,
-      required: true
-    },
-    minValue: {
-      type: Number,
-      required: true
-    },
-    maxValue: {
-      type: Number,
-      required: true
-    },
-    step: {
-      type: Number,
-      required: true
-    },
-    valueExtension: {
-      type: String,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['change'],
-  data: function () {
-    return {
-      id: '',
-      currentValue: 0
-    }
-  },
-  computed: {
-    displayLabel: function () {
-      if (this.valueExtension === null) {
-        return this.currentValue
-      } else {
-        return `${this.currentValue}${this.valueExtension}`
-      }
-    }
-  },
-  watch: {
-    defaultValue: function () {
-      this.currentValue = this.defaultValue
-    }
-  },
-  created: function () {
-    this.id = this._uid
-    this.currentValue = this.defaultValue
-  },
-  methods: {
-    change: function () {
-      this.$emit('change', this.currentValue)
-    }
-  }
-})
diff --git a/src/renderer/components/ft-slider/ft-slider.vue b/src/renderer/components/ft-slider/ft-slider.vue
deleted file mode 100644
index 78e7e5201b8b4..0000000000000
--- a/src/renderer/components/ft-slider/ft-slider.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <label
-    class="pure-material-slider"
-    :for="id"
-  >
-    <input
-      :id="id"
-      v-model.number="currentValue"
-      :disabled="disabled"
-      type="range"
-      :min="minValue"
-      :max="maxValue"
-      :step="step"
-      @change="change"
-    >
-    <span>
-      {{ $t('Display Label', {label: label, value: displayLabel}) }}
-    </span>
-  </label>
-</template>
-
-<script src="./ft-slider.js" />
-<style scoped src="./ft-slider.css" />
diff --git a/src/renderer/components/player-settings/player-settings.js b/src/renderer/components/player-settings/player-settings.js
index a8e7591cf1969..f04864d992b69 100644
--- a/src/renderer/components/player-settings/player-settings.js
+++ b/src/renderer/components/player-settings/player-settings.js
@@ -3,7 +3,7 @@ import { mapActions } from 'vuex'
 import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
-import FtSlider from '../ft-slider/ft-slider.vue'
+import FtSlider from '../FtSlider/FtSlider.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtButton from '../ft-button/ft-button.vue'
 import FtInput from '../ft-input/ft-input.vue'
diff --git a/src/renderer/components/subscription-settings/subscription-settings.js b/src/renderer/components/subscription-settings/subscription-settings.js
index 9d455bbf6b2ce..c934bc141cc4a 100644
--- a/src/renderer/components/subscription-settings/subscription-settings.js
+++ b/src/renderer/components/subscription-settings/subscription-settings.js
@@ -2,7 +2,7 @@ import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
-import FtSlider from '../ft-slider/ft-slider.vue'
+import FtSlider from '../FtSlider/FtSlider.vue'
 
 export default defineComponent({
   name: 'SubscriptionSettings',