Added a slider component

apps/webapp/app/components/billing/PricingTiers.tsx

@@ -1,5 +1,6 @@
 import { cn } from "~/utils/cn";
 import { Paragraph } from "../primitives/Paragraph";
+import * as Slider from "@radix-ui/react-slider";
 
 export function PricingTiers({ children }: { children: React.ReactNode }) {
   return <div className="flex gap-4">{children}</div>;
@@ -72,7 +73,7 @@ function Header({ title, flatCost }: { title: string; flatCost?: number }) {
 function TierLimit({ description, pricedMetric }: { description: string; pricedMetric?: boolean }) {
   return (
     <div>
-      {pricedMetric ? <div>hi</div> : <hr className="my-4" />}
+      {pricedMetric ? <PricingSlider /> : <hr className="my-[1.6rem]" />}
 
       <Paragraph variant="small/bright" className="">
         {description}
@@ -80,3 +81,25 @@ function TierLimit({ description, pricedMetric }: { description: string; pricedM
     </div>
   );
 }
+
+export function PricingSlider() {
+  return (
+    <form>
+      <Slider.Root
+        className="relative my-4 flex h-5 w-full touch-none select-none items-center"
+        // It would be nice to set the default value to always be 1 bracket above your current one, up to the max.
+        defaultValue={[20]}
+        max={100}
+        step={5}
+      >
+        <Slider.Track className="relative h-[8px] grow rounded-full bg-slate-850">
+          <Slider.Range className="absolute h-full rounded-full bg-indigo-500" />
+        </Slider.Track>
+        <Slider.Thumb
+          className="block h-5 w-5 rounded-full border-4 border-indigo-500 bg-slate-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-indigo-400 hover:bg-slate-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
+          aria-label="Pro tier pricing slider"
+        />
+      </Slider.Root>
+    </form>
+  );
+}

apps/webapp/package.json

@@ -52,6 +52,7 @@
     "@radix-ui/react-popover": "^1.0.5",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^1.2.1",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.5",

pnpm-lock.yaml

@@ -98,6 +98,7 @@ importers:
       '@radix-ui/react-popover': ^1.0.5
       '@radix-ui/react-radio-group': ^1.1.3
       '@radix-ui/react-select': ^1.2.1
+      '@radix-ui/react-slider': ^1.1.2
       '@radix-ui/react-switch': ^1.0.3
       '@radix-ui/react-tabs': ^1.0.3
       '@radix-ui/react-tooltip': ^1.0.5
@@ -250,6 +251,7 @@ importers:
       '@radix-ui/react-popover': 1.0.5_bwbutfx4xj25dewzmxso6o3wga
       '@radix-ui/react-radio-group': 1.1.3_daadhm4ohxobgnrt365as5bhny
       '@radix-ui/react-select': 1.2.1_bwbutfx4xj25dewzmxso6o3wga
+      '@radix-ui/react-slider': 1.1.2_daadhm4ohxobgnrt365as5bhny
       '@radix-ui/react-switch': 1.0.3_daadhm4ohxobgnrt365as5bhny
       '@radix-ui/react-tabs': 1.0.3_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-tooltip': 1.0.5_bwbutfx4xj25dewzmxso6o3wga
@@ -10384,6 +10386,12 @@ packages:
       '@babel/runtime': 7.22.5
     dev: false
 
+  /@radix-ui/number/1.0.1:
+    resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
+    dependencies:
+      '@babel/runtime': 7.22.5
+    dev: false
+
   /@radix-ui/primitive/1.0.0:
     resolution: {integrity: sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==}
     dependencies:
@@ -11006,6 +11014,37 @@ packages:
       - '@types/react'
     dev: false
 
+  /@radix-ui/react-slider/1.1.2_daadhm4ohxobgnrt365as5bhny:
+    resolution: {integrity: sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.5
+      '@radix-ui/number': 1.0.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3_daadhm4ohxobgnrt365as5bhny
+      '@radix-ui/react-compose-refs': 1.0.1_e74vmjybjy5dsfplslbsgtbvvi
+      '@radix-ui/react-context': 1.0.1_e74vmjybjy5dsfplslbsgtbvvi
+      '@radix-ui/react-direction': 1.0.1_e74vmjybjy5dsfplslbsgtbvvi
+      '@radix-ui/react-primitive': 1.0.3_daadhm4ohxobgnrt365as5bhny
+      '@radix-ui/react-use-controllable-state': 1.0.1_e74vmjybjy5dsfplslbsgtbvvi
+      '@radix-ui/react-use-layout-effect': 1.0.1_e74vmjybjy5dsfplslbsgtbvvi
+      '@radix-ui/react-use-previous': 1.0.1_e74vmjybjy5dsfplslbsgtbvvi
+      '@radix-ui/react-use-size': 1.0.1_e74vmjybjy5dsfplslbsgtbvvi
+      '@types/react': 18.2.17
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@radix-ui/react-slot/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==}
     peerDependencies: