diff --git a/invokeai/frontend/web/src/common/components/IAISlider.tsx b/invokeai/frontend/web/src/common/components/IAISlider.tsx
index d99fbfa149..00492b28d6 100644
--- a/invokeai/frontend/web/src/common/components/IAISlider.tsx
+++ b/invokeai/frontend/web/src/common/components/IAISlider.tsx
@@ -43,11 +43,6 @@ import { useTranslation } from 'react-i18next';
import { BiReset } from 'react-icons/bi';
import IAIIconButton, { IAIIconButtonProps } from './IAIIconButton';
-const SLIDER_MARK_STYLES: ChakraProps['sx'] = {
- mt: 1.5,
- fontSize: '2xs',
-};
-
export type IAIFullSliderProps = {
label?: string;
value: number;
@@ -206,11 +201,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
isDisabled={isDisabled}
{...sliderFormControlProps}
>
- {label && (
-
- {label}
-
- )}
+ {label && {label}}
{
sx={{
insetInlineStart: '0 !important',
insetInlineEnd: 'unset !important',
- ...SLIDER_MARK_STYLES,
}}
{...sliderMarkProps}
>
@@ -244,7 +234,6 @@ const IAISlider = (props: IAIFullSliderProps) => {
sx={{
insetInlineStart: 'unset !important',
insetInlineEnd: '0 !important',
- ...SLIDER_MARK_STYLES,
}}
{...sliderMarkProps}
>
@@ -263,7 +252,6 @@ const IAISlider = (props: IAIFullSliderProps) => {
sx={{
insetInlineStart: '0 !important',
insetInlineEnd: 'unset !important',
- ...SLIDER_MARK_STYLES,
}}
{...sliderMarkProps}
>
@@ -278,7 +266,6 @@ const IAISlider = (props: IAIFullSliderProps) => {
sx={{
insetInlineStart: 'unset !important',
insetInlineEnd: '0 !important',
- ...SLIDER_MARK_STYLES,
}}
{...sliderMarkProps}
>
@@ -291,7 +278,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
key={m}
value={m}
sx={{
- ...SLIDER_MARK_STYLES,
+ transform: 'translateX(-50%)',
}}
{...sliderMarkProps}
>
diff --git a/invokeai/frontend/web/src/theme/components/slider.ts b/invokeai/frontend/web/src/theme/components/slider.ts
index 397dea786a..98a2556b9e 100644
--- a/invokeai/frontend/web/src/theme/components/slider.ts
+++ b/invokeai/frontend/web/src/theme/components/slider.ts
@@ -30,7 +30,7 @@ const invokeAIThumb = defineStyle((props) => {
const invokeAIMark = defineStyle((props) => {
return {
- fontSize: 'xs',
+ fontSize: '2xs',
fontWeight: '500',
color: mode('base.700', 'base.400')(props),
mt: 2,