mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-01-06 05:40:02 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

fix: overloading slider on exceeding max limits in pricing tier (#1530)

Browse Source
This commit is contained in:
Shubham Palriwala
2023-10-31 03:07:02 +05:30
committed by GitHub
parent 9971662077
commit 22f579389a
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/ui/BillingSlider/index.tsx
View File

@@ -18,7 +18,9 @@ export const BillingSlider = React.forwardRef<React.ElementRef<typeof SliderPrim
className={cn("relative flex w-full touch-none select-none items-center", className)}
{...props}>
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-slate-300">
<div style={{ width: `${(value / max) * 100}%` }} className="absolute h-full bg-slate-800"></div>
<div
style={{ width: `calc(${Math.min(value / max, 0.93) * 100}%)` }}
className="absolute h-full bg-slate-800"></div>
<div
style={{
width: `${((freeTierLimit - value) / max) * 100}%`,
@@ -27,11 +29,13 @@ export const BillingSlider = React.forwardRef<React.ElementRef<typeof SliderPrim
className="absolute h-full bg-slate-500"></div>
</SliderPrimitive.Track>
<div style={{ left: `${(value / max) * 100}%` }} className="absolute mt-4 h-6 w-px bg-slate-500"></div>
<div
style={{ left: `calc(${Math.min(value / max, 0.93) * 100}%)` }}
className="absolute mt-4 h-6 w-px bg-slate-500"></div>
<div
style={{ left: `calc(${(value / max) * 100}% + 0.5rem)` }}
className="absolute mt-12 text-sm text-slate-700 dark:text-slate-200">
style={{ left: `calc(${Math.min(value / max, 0.93) * 100}% + 0.5rem)` }}
className="absolute mt-16 text-sm text-slate-700 dark:text-slate-200">
<p className="text-xs">
Current:
<br />