diff --git a/client/src/components/SidePanel/Parameters/DynamicSlider.tsx b/client/src/components/SidePanel/Parameters/DynamicSlider.tsx index 2a4de63571..55417ff0f7 100644 --- a/client/src/components/SidePanel/Parameters/DynamicSlider.tsx +++ b/client/src/components/SidePanel/Parameters/DynamicSlider.tsx @@ -141,6 +141,7 @@ function DynamicSlider({ max={max} min={range ? range.min : 0} step={range ? range.step ?? 1 : 1} + trackClassName="bg-surface-hover" className="flex h-4 w-full" /> )} diff --git a/client/src/components/ui/Slider.tsx b/client/src/components/ui/Slider.tsx index c944a93a71..ea407885ea 100644 --- a/client/src/components/ui/Slider.tsx +++ b/client/src/components/ui/Slider.tsx @@ -2,20 +2,26 @@ import * as React from 'react'; import * as SliderPrimitive from '@radix-ui/react-slider'; import { useDoubleClick } from '@zattoo/use-double-click'; import type { clickEvent } from '@zattoo/use-double-click'; -import { cn } from '../../utils'; +import { cn } from '~/utils'; interface SliderProps extends React.ComponentPropsWithoutRef { doubleClickHandler?: clickEvent; + trackClassName?: string; } const Slider = React.forwardRef, SliderProps>( - ({ className, doubleClickHandler, ...props }, ref) => ( + ( + { className, trackClassName = 'bg-gray-200 dark:bg-gray-850', doubleClickHandler, ...props }, + ref, + ) => ( - +