diff --git a/StreamAwesome/src/components/settings/GeneralOptions.vue b/StreamAwesome/src/components/settings/GeneralOptions.vue
index 40cb994c..63b0a904 100644
--- a/StreamAwesome/src/components/settings/GeneralOptions.vue
+++ b/StreamAwesome/src/components/settings/GeneralOptions.vue
@@ -15,6 +15,7 @@ import Icon from '@/components/utils/IconDisplay.vue'
 import type { FontAwesomeIcon } from '@/model/fontAwesomeIcon'
 import { ref } from 'vue'
 import { fontAwesomeVersionInfo } from '@/model/versions'
+import RangeInput from './Sliders/RangeInput.vue'
 
 const props = defineProps<{
   icon: CustomIcon<FontAwesomePreset>
@@ -96,14 +97,13 @@ function updateStyle(style: FontAwesomeStyle) {
     <label for="iconSize" class="mb-[0.5] block text-sm font-medium text-gray-900 dark:text-white"
       >Icon Size and Style:
     </label>
-    <input
+    <RangeInput
       id="iconSize"
-      type="range"
       :value="props.icon?.fontSize ?? 180"
       @input="(event) => updateSize(event)"
       min="50"
       max="250"
-      class="mb-6 h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:bg-gray-700"
+      class="my-3"
     />
   </div>
 
diff --git a/StreamAwesome/src/components/settings/Sliders/HueInput.vue b/StreamAwesome/src/components/settings/Sliders/HueInput.vue
new file mode 100644
index 00000000..7923e5f6
--- /dev/null
+++ b/StreamAwesome/src/components/settings/Sliders/HueInput.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SliderPicker from './RangeInput.vue'
+
+const hue = defineModel<number>()
+const currentHue = ref(hue)
+</script>
+
+<template>
+  <SliderPicker class="hueSelector" v-model="hue" min="0" max="360" />
+</template>
+
+<style scoped>
+.hueSelector:deep(input[type='range']) {
+  height: 1rem;
+  background: linear-gradient(
+    90deg,
+    hsl(0, 72%, 56%) 0%,
+    hsl(60, 72%, 56%) 25%,
+    hsl(120, 72%, 56%) 33.3%,
+    hsl(240, 72%, 56%) 66.6%,
+    hsl(360, 72%, 56%) 100%
+  );
+}
+
+.hueSelector:deep(input[type='range']::-webkit-slider-thumb),
+.hueSelector:deep(input[type='range']::-moz-range-thumb) {
+  background-color: hsl(v-bind('currentHue'), 72%, 56%);
+}
+</style>
diff --git a/StreamAwesome/src/components/settings/Sliders/LightnessInput.vue b/StreamAwesome/src/components/settings/Sliders/LightnessInput.vue
new file mode 100644
index 00000000..1611b31a
--- /dev/null
+++ b/StreamAwesome/src/components/settings/Sliders/LightnessInput.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import SliderPicker from './RangeInput.vue'
+
+const { hue } = defineProps<{
+  hue: number
+}>()
+
+const lightness = defineModel<number>()
+</script>
+
+<template>
+  <SliderPicker class="lightnessSelector" v-model="lightness" min="0.05" max="0.95" step="0.01" />
+</template>
+
+<style scoped>
+.lightnessSelector:deep(input[type='range']) {
+  height: 1rem;
+  background: linear-gradient(
+    90deg,
+    hsl(v-bind('hue'), 72%, 5%) 0%,
+    hsl(v-bind('hue'), 72%, 95%) 100%
+  );
+}
+</style>
diff --git a/StreamAwesome/src/components/settings/Sliders/RangeInput.vue b/StreamAwesome/src/components/settings/Sliders/RangeInput.vue
new file mode 100644
index 00000000..5ce932de
--- /dev/null
+++ b/StreamAwesome/src/components/settings/Sliders/RangeInput.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  min?: number | string
+  max?: number | string
+  step?: number | string
+}>()
+const emit = defineEmits<{
+  input: [event: InputEvent]
+}>()
+
+const value = defineModel<number>()
+const showInput = ref(false)
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <input
+      type="range"
+      :min="props.min"
+      :max="props.max"
+      :step="props.step"
+      class="selector h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:bg-gray-700"
+      v-model.number="value"
+      @input="(e) => emit('input', e as InputEvent)"
+      @click.right="
+        (e) => {
+          showInput = !showInput
+          e.preventDefault()
+        }
+      "
+    />
+    <input
+      v-show="showInput"
+      type="number"
+      :min="props.min"
+      :max="props.max"
+      class="w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+      v-model.number="value"
+      @input="(e) => emit('input', e as InputEvent)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.selector {
+  display: block;
+  width: 100%;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 0.25rem;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+input[type='range']::-webkit-slider-thumb,
+input[type='range']::-moz-range-thumb {
+  height: 2rem;
+  width: 1rem;
+  cursor: grab;
+  display: block;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  outline: 2px solid transparent;
+  border: none;
+  border-radius: 0.25rem;
+}
+
+input[type='number'] {
+  @apply appearance-none;
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+input[type='number']:focus {
+  @apply appearance-none;
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+</style>
diff --git a/StreamAwesome/src/components/settings/Sliders/SaturationInput.vue b/StreamAwesome/src/components/settings/Sliders/SaturationInput.vue
new file mode 100644
index 00000000..77e22de1
--- /dev/null
+++ b/StreamAwesome/src/components/settings/Sliders/SaturationInput.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SliderPicker from './RangeInput.vue'
+
+const saturation = defineModel<number>()
+const currentSaturation = ref(saturation)
+</script>
+
+<template>
+  <SliderPicker class="saturationSelector" v-model="saturation" min="0" max="1" step="0.01" />
+</template>
+
+<style scoped>
+.saturationSelector:deep(input[type='range']) {
+  height: 1rem;
+  background: linear-gradient(
+    90deg,
+    hsl(v-bind('currentSaturation'), 5%, 56%) 0%,
+    hsl(v-bind('currentSaturation'), 100%, 56%) 100%
+  );
+}
+</style>
diff --git a/StreamAwesome/src/components/settings/presets/ClassicPreset.vue b/StreamAwesome/src/components/settings/presets/ClassicPreset.vue
index 37ec22bc..b9755ea4 100644
--- a/StreamAwesome/src/components/settings/presets/ClassicPreset.vue
+++ b/StreamAwesome/src/components/settings/presets/ClassicPreset.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { CustomIcon, FontAwesomePreset } from '@/model/customIcon'
+import HueInput from '../Sliders/HueInput.vue'
 
 const props = defineProps<{
   icon: CustomIcon<FontAwesomePreset>
@@ -19,64 +20,13 @@ function applyDefaultSettings() {
   currentIcon.value.fontAwesomeIcon.style = 'solid'
   currentIcon.value.fontAwesomeIcon.family = 'classic'
 }
-
-const currentHue = ref((currentIcon.value as CustomIcon<'Classic'>).presetSettings.hue)
 </script>
 
 <template>
-  <label for="hueSelector" class="block flex-grow text-sm font-medium text-gray-900 dark:text-white"
+  <label for="hueSelector" class="block grow text-sm font-medium text-gray-900 dark:text-white"
     >Hue:</label
   >
-  <input
-    type="range"
-    id="hueSelector"
-    max="360"
-    min="0"
-    class="selector focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
-    v-model.number="(currentIcon as CustomIcon<'Classic'>).presetSettings.hue"
-  />
+  <HueInput id="hueSelector" v-model="(currentIcon as CustomIcon<'Classic'>).presetSettings.hue" />
 </template>
 
-<style scoped>
-.selector {
-  display: block;
-  height: 1rem;
-  width: 100%;
-  cursor: pointer;
-  -webkit-appearance: none;
-  appearance: none;
-  border-radius: 0.25rem;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-#hueSelector {
-  background: linear-gradient(
-    90deg,
-    hsl(0, 72%, 56%) 0%,
-    hsl(60, 72%, 56%) 25%,
-    hsl(120, 72%, 56%) 33.3%,
-    hsl(240, 72%, 56%) 66.6%,
-    hsl(360, 72%, 56%) 100%
-  );
-}
-
-input[type='range']::-webkit-slider-thumb,
-input[type='range']::-moz-range-thumb {
-  height: 2rem;
-  width: 1rem;
-  cursor: grab;
-  display: block;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  outline: 2px solid transparent;
-  border: none;
-  border-radius: 0.25rem;
-}
-
-input[type='range']#hueSelector::-webkit-slider-thumb,
-input[type='range']#hueSelector::-moz-range-thumb {
-  background-color: hsl(v-bind('currentHue'), 72%, 56%);
-}
-</style>
+<style scoped></style>
diff --git a/StreamAwesome/src/components/settings/presets/ModernPreset.vue b/StreamAwesome/src/components/settings/presets/ModernPreset.vue
index ee0f8c32..3b615c31 100644
--- a/StreamAwesome/src/components/settings/presets/ModernPreset.vue
+++ b/StreamAwesome/src/components/settings/presets/ModernPreset.vue
@@ -29,7 +29,7 @@ function applyDefaultSettings() {
       v-model="(currentIcon as CustomIcon<'Modern'>).presetSettings.inverted"
     />
     <div
-      class="peer relative h-6 w-11 rounded-full bg-gray-200 peer-checked:bg-blue-600 peer-focus:ring-4 peer-focus:ring-blue-300 peer-focus:outline-none after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"
+      class="peer relative h-6 w-11 rounded-full bg-gray-200 peer-checked:bg-blue-600 peer-focus:ring-4 peer-focus:ring-blue-300 peer-focus:outline-none after:absolute after:start-0.5 after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"
     ></div>
     <span class="ms-3 text-sm font-medium text-gray-900 dark:text-white">Invert Colors</span>
   </label>
diff --git a/StreamAwesome/src/components/settings/presets/NeoPreset.vue b/StreamAwesome/src/components/settings/presets/NeoPreset.vue
index 3167cf86..96f58ed5 100644
--- a/StreamAwesome/src/components/settings/presets/NeoPreset.vue
+++ b/StreamAwesome/src/components/settings/presets/NeoPreset.vue
@@ -2,6 +2,10 @@
 import { ref } from 'vue'
 import type { CustomIcon, FontAwesomePreset } from '@/model/customIcon'
 import { ColorSpaceKeys } from '@/model/customIcon'
+import HuePicker from '../Sliders/HueInput.vue'
+import SaturationInput from '../Sliders/SaturationInput.vue'
+import LightnessInput from '../Sliders/LightnessInput.vue'
+import RangeInput from '../Sliders/RangeInput.vue'
 
 const props = defineProps<{
   icon: CustomIcon<FontAwesomePreset>
@@ -28,7 +32,7 @@ function applyDefaultSettings() {
   currentIcon.value.fontAwesomeIcon.family = 'classic'
 }
 
-const currentHue = ref((currentIcon.value as CustomIcon<'Neo'>).presetSettings.hueStart)
+// const currentHue = ref((currentIcon.value as CustomIcon<'Neo'>).presetSettings.hueStart)
 
 const settingsExpanded = ref(false)
 const toggleSettings = () => {
@@ -37,17 +41,14 @@ const toggleSettings = () => {
 </script>
 
 <template>
-  <label for="hueSelector" class="block flex-grow text-sm font-medium text-gray-900 dark:text-white"
+  <label for="hueSelector" class="block grow text-sm font-medium text-gray-900 dark:text-white"
     >Hue Start:</label
   >
-  <input
-    type="range"
+  <HuePicker
     id="hueSelector"
+    v-model="(currentIcon as CustomIcon<'Neo'>).presetSettings.hueStart"
     min="0"
     max="360"
-    class="selector focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
-    v-model.number="(currentIcon as CustomIcon<'Neo'>).presetSettings.hueStart"
-    @input="currentHue = (currentIcon as CustomIcon<'Neo'>).presetSettings.hueStart"
   />
 
   <label class="mt-3 inline-flex cursor-pointer items-center">
@@ -57,7 +58,7 @@ const toggleSettings = () => {
       v-model="(currentIcon as CustomIcon<'Neo'>).presetSettings.invertDirection"
     />
     <div
-      class="peer relative h-6 w-11 rounded-full bg-gray-200 peer-checked:bg-blue-600 peer-focus:ring-4 peer-focus:ring-blue-300 peer-focus:outline-none after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"
+      class="peer relative h-6 w-11 rounded-full bg-gray-200 peer-checked:bg-blue-600 peer-focus:ring-4 peer-focus:ring-blue-300 peer-focus:outline-none after:absolute after:start-0.5 after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"
     ></div>
     <span class="ms-3 text-sm font-medium text-gray-900 dark:text-white">Invert Direction</span>
   </label>
@@ -71,7 +72,7 @@ const toggleSettings = () => {
       v-model="(currentIcon as CustomIcon<'Neo'>).presetSettings.symbolOnly"
     />
     <div
-      class="peer relative h-6 w-11 rounded-full bg-gray-200 peer-checked:bg-blue-600 peer-focus:ring-4 peer-focus:ring-blue-300 peer-focus:outline-none after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"
+      class="peer relative h-6 w-11 rounded-full bg-gray-200 peer-checked:bg-blue-600 peer-focus:ring-4 peer-focus:ring-blue-300 peer-focus:outline-none after:absolute after:start-0.5 after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"
     ></div>
     <span class="ms-3 text-sm font-medium text-gray-900 dark:text-white">Symbol Only</span>
   </label>
@@ -91,26 +92,24 @@ const toggleSettings = () => {
     <label for="hueShift" class="block text-sm font-medium text-gray-900 dark:text-white"
       >Hue Shift:</label
     >
-    <input
-      type="range"
+    <RangeInput
       id="hueShift"
       min="0"
       max="180"
-      class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:bg-gray-700"
-      v-model.number="(currentIcon as CustomIcon<'Neo'>).presetSettings.hueShift"
+      v-model="(currentIcon as CustomIcon<'Neo'>).presetSettings.hueShift"
+      class="mt-2.5 mb-1.5"
     />
 
-    <label for="hueShift" class="block text-sm font-medium text-gray-900 dark:text-white"
+    <label for="translation" class="block text-sm font-medium text-gray-900 dark:text-white"
       >Translation:</label
     >
-    <input
-      type="range"
-      id="hueShift"
+    <RangeInput
+      id="translation"
       min="-0.5"
       max="0.5"
       step="0.01"
-      class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:bg-gray-700"
-      v-model.number="(currentIcon as CustomIcon<'Neo'>).presetSettings.translation"
+      v-model="(currentIcon as CustomIcon<'Neo'>).presetSettings.hueShift"
+      class="mt-2.5 mb-3.5"
     />
 
     <label
@@ -118,29 +117,16 @@ const toggleSettings = () => {
       class="mt-2 block text-sm font-medium text-gray-900 dark:text-white"
       >Saturation:</label
     >
-    <input
-      type="range"
-      id="saturationSelector"
-      max="1"
-      min="0.05"
-      step="0.01"
-      class="selector focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
-      v-model.number="(currentIcon as CustomIcon<'Neo'>).presetSettings.saturation"
-    />
+    <SaturationInput v-model="(currentIcon as CustomIcon<'Neo'>).presetSettings.saturation" />
 
     <label
       for="lightnessSelector"
       class="mt-2 block text-sm font-medium text-gray-900 dark:text-white"
       >Lightness:</label
     >
-    <input
-      type="range"
-      id="lightnessSelector"
-      max="0.95"
-      min="0.05"
-      step="0.01"
-      class="selector focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
-      v-model.number="(currentIcon as CustomIcon<'Neo'>).presetSettings.lightness"
+    <LightnessInput
+      :hue="(currentIcon as CustomIcon<'Neo'>).presetSettings.hueStart"
+      v-model="(currentIcon as CustomIcon<'Neo'>).presetSettings.lightness"
     />
 
     <label
@@ -159,63 +145,3 @@ const toggleSettings = () => {
     </select>
   </div>
 </template>
-
-<style scoped>
-.selector {
-  display: block;
-  height: 1rem;
-  width: 100%;
-  cursor: pointer;
-  -webkit-appearance: none;
-  appearance: none;
-  border-radius: 0.25rem;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-#hueSelector {
-  background: linear-gradient(
-    90deg,
-    hsl(0, 72%, 56%) 0%,
-    hsl(60, 72%, 56%) 25%,
-    hsl(120, 72%, 56%) 33.3%,
-    hsl(240, 72%, 56%) 66.6%,
-    hsl(360, 72%, 56%) 100%
-  );
-}
-
-#saturationSelector {
-  background: linear-gradient(
-    90deg,
-    hsl(v-bind('currentHue'), 5%, 56%) 0%,
-    hsl(v-bind('currentHue'), 100%, 56%) 100%
-  );
-}
-
-#lightnessSelector {
-  background: linear-gradient(
-    90deg,
-    hsl(v-bind('currentHue'), 72%, 5%) 0%,
-    hsl(v-bind('currentHue'), 72%, 95%) 100%
-  );
-}
-
-input[type='range']::-webkit-slider-thumb,
-input[type='range']::-moz-range-thumb {
-  height: 2rem;
-  width: 1rem;
-  cursor: grab;
-  display: block;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  outline: 2px solid transparent;
-  border: none;
-  border-radius: 0.25rem;
-}
-
-input[type='range']#hueSelector::-webkit-slider-thumb,
-input[type='range']#hueSelector::-moz-range-thumb {
-  background-color: hsl(v-bind('currentHue'), 72%, 56%);
-}
-</style>