Add monochrome slider support with styling adjustments

app/styles/_variables.scss

@@ -7,6 +7,7 @@ $color-border: rgba(255, 255, 255, 0.16);
 $color-button: rgba(255, 255, 255, 0.08);
 $color-button-hover: rgba(255, 255, 255, 0.16);
 $color-attention: #fc8181;
+$color-slider-monochrome: white;
 
 $border-radius-standard: 0.3rem;
 $border-radius-lg: 0.6rem;

app/ui/RangeSlider.vue

@@ -4,6 +4,7 @@ interface SliderProps {
 	max?: number
 	step?: number
 	dontUpdateImmediately?: boolean
+	monochrome?: boolean
 }
 
 const props = withDefaults(defineProps<SliderProps>(), {
@@ -11,6 +12,7 @@ const props = withDefaults(defineProps<SliderProps>(), {
 	max: 100,
 	step: 1,
 	dontUpdateImmediately: false,
+	monochrome: false,
 })
 
 const value = defineModel<number>()
@@ -67,7 +69,11 @@ const onMouseDown = (event: MouseEvent) => {
 <template>
 	<div ref="slider-ref" class="slider" @mousedown="onMouseDown">
 		<div class="track">
-			<div class="fill" :style="{ width: percentage + '%' }" />
+			<div
+				class="fill"
+				:class="{ monochrome }"
+				:style="{ width: percentage + '%' }"
+			/>
 		</div>
 	</div>
 </template>
@@ -98,4 +104,8 @@ const onMouseDown = (event: MouseEvent) => {
 	background: $color-accent;
 	border-radius: 999px;
 }
+
+.slider .monochrome {
+	background-color: $color-slider-monochrome;
+}
 </style>