BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: simplify slider visuals by removing gradient

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-02-10 13:19:36 +02:00
parent ab4ed8799d
commit d663e3f82c
1 changed files with 1 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/ui/slider.tsx
+1 -6
View File
@@ -28,8 +28,6 @@ export const Slider: React.FC<SliderProps> = ({
label, label,
valueFormatter = (v) => v.toFixed(1), valueFormatter = (v) => v.toFixed(1),
}) => { }) => {
const percentage = ((value - min) / (max - min)) * 100;
return ( return (
<div className={cn('flex items-center gap-3', className)}> <div className={cn('flex items-center gap-3', className)}>
<div className="flex-1 relative"> <div className="flex-1 relative">
@@ -42,7 +40,7 @@ export const Slider: React.FC<SliderProps> = ({
onChange={(e) => onChange(parseFloat(e.target.value))} onChange={(e) => onChange(parseFloat(e.target.value))}
disabled={disabled} disabled={disabled}
className={cn( className={cn(
'w-full h-2 rounded-full appearance-none cursor-pointer bg-muted-foreground/20', 'w-full h-2 rounded-lg appearance-none cursor-pointer bg-muted',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'disabled:cursor-not-allowed disabled:opacity-50', 'disabled:cursor-not-allowed disabled:opacity-50',
'[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4', '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4',
@@ -52,9 +50,6 @@ export const Slider: React.FC<SliderProps> = ({
'[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full', '[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full',
'[&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:shadow-md' '[&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:shadow-md'
)} )}
style={{
background: `linear-gradient(to right, hsl(var(--primary)) ${percentage}%, hsl(var(--muted-foreground) / 0.2) ${percentage}%)`,
}}
aria-label={label} aria-label={label}
aria-valuemin={min} aria-valuemin={min}
aria-valuemax={max} aria-valuemax={max}