chore: upgrade slider ui (#6838)

This commit is contained in:
Joel 2024-07-31 17:46:43 +08:00 committed by GitHub
parent af76381b98
commit 77c071e26f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 27 deletions

View File

@ -31,9 +31,9 @@ const Slider: React.FC<ISliderProps> = ({
min={min || 0}
max={max || 100}
step={step || 1}
className={cn('slider', className)}
thumbClassName={cn('slider-thumb', thumbClassName)}
trackClassName={cn('slider-track', trackClassName)}
className={cn('relative slider', className)}
thumbClassName={cn('absolute top-[-9px] w-2 h-5 border-[0.5px] border-components-silder-knob-border rounded-[3px] bg-components-silder-knob shadow-sm focus:outline-none', !disabled && 'cursor-pointer', thumbClassName)}
trackClassName={cn('h-0.5 rounded-full slider-track', trackClassName)}
onChange={onChange}
/>
}

View File

@ -1,32 +1,11 @@
.slider {
position: relative;
}
.slider.disabled {
opacity: 0.6;
}
.slider-thumb {
width: 16px;
height: 16px;
background-color: white;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.08);
position: absolute;
top: -8px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
cursor: pointer;
}
.slider-thumb:focus {
outline: none;
}
.slider-track {
background-color: #528BFF;
height: 2px;
background-color: var(--color-components-silder-range);
}
.slider-track-1 {
background-color: #E5E7EB;
background-color: var(--color-components-silder-track);
}