feat: Slider

package.json

@@ -27,6 +27,7 @@
     "@floating-ui/react": "^0.19.2",
     "@headlessui/react": "^1.7.17",
     "@headlessui/tailwindcss": "^0.1.3",
+    "@radix-ui/react-slider": "^1.1.2",
     "date-fns": "^2.30.0",
     "react-day-picker": "^8.9.1",
     "react-transition-group": "^4.4.5",

src/components/input-elements/Slider/Slider.tsx

@@ -0,0 +1,133 @@
+import { useInternalState } from "hooks";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import {
+  Color,
+  ValueFormatter,
+  colorPalette,
+  //   defaultValueFormatter,
+  getColorClassNames,
+  makeClassName,
+  tremorTwMerge,
+} from "lib";
+
+import React from "react";
+
+const makeSliderClassName = makeClassName("Slider");
+
+const getSliderColors = (color?: Color) => {
+  return {
+    bgColor: color
+      ? getColorClassNames(color, colorPalette.background).bgColor
+      : "bg-tremor-brand dark:bg-dark-tremor-brand",
+    lightBackgroundColor: color
+      ? getColorClassNames(color, colorPalette.lightBorder).bgColor
+      : "bg-tremor-brand-muted dark:bg-dark-tremor-brand-muted",
+    ringColor: color
+      ? getColorClassNames(color, colorPalette.ring).ringColor
+      : "focus:ring-tremor-brand-muted focus:dark:ring-dark-tremor-brand-muted",
+  };
+};
+
+type SliderValue = [number] | [number, number];
+
+export interface SliderProps extends SliderPrimitive.SliderProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  color?: Color;
+  value?: SliderValue;
+  defaultValue?: SliderValue;
+  onValueChange?(value: SliderValue): void;
+  range?: boolean;
+  showTootlip?: boolean;
+  valueFormatter?: ValueFormatter;
+  disabled?: boolean;
+}
+
+const Slider = React.forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
+  const {
+    min = 0,
+    max = 100,
+    step = 1,
+    defaultValue = [0],
+    value: inputValue,
+    onValueChange,
+    color,
+    showTootlip = true,
+    // valueFormatter = defaultValueFormatter,
+    disabled = false,
+    ...other
+  } = props;
+  const sliderColorStyles = getSliderColors(color);
+  const [value, setValue] = useInternalState(defaultValue, inputValue);
+
+  return (
+    <SliderPrimitive.Root
+      {...other}
+      ref={ref}
+      value={value}
+      onValueChange={(val) => {
+        const formatedValue = val as SliderValue;
+        setValue(formatedValue);
+        onValueChange?.(formatedValue);
+      }}
+      min={min}
+      max={max}
+      step={step}
+      disabled={disabled}
+      aria-label="value"
+      className={tremorTwMerge(
+        makeSliderClassName("root"),
+        //common
+        "relative flex h-5 w-full touch-none items-center",
+        "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:flex-col",
+      )}
+    >
+      {showTootlip && value ? (
+        //TBD (with new custom tooltip? @chris @sev)
+        <></>
+      ) : null}
+      <SliderPrimitive.Track
+        className={tremorTwMerge(
+          makeSliderClassName("track"),
+          //common
+          "relative h-2 w-full grow rounded-full",
+          "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2",
+          sliderColorStyles.lightBackgroundColor,
+        )}
+      >
+        <SliderPrimitive.Range
+          className={tremorTwMerge(
+            makeSliderClassName("range"),
+            "absolute h-full rounded-full",
+            "data-[orientation=vertical]:w-full data-[orientation=vertical]:h-auto",
+            sliderColorStyles.bgColor,
+          )}
+        />
+      </SliderPrimitive.Track>
+      {value?.map((_, index) => {
+        return (
+          <SliderPrimitive.Thumb
+            key={index}
+            className={tremorTwMerge(
+              makeSliderClassName("thumb"),
+              //common
+              "block h-5 w-5 rounded-full outline-none focus:ring-2 shadow-tremor-input duration-100 ease-in-out transition border-2",
+              //light
+              "border-tremor-background ",
+              //dark
+              "dark:border-dark-tremor-background",
+              sliderColorStyles.bgColor,
+              sliderColorStyles.ringColor,
+              disabled ? "cursor-not-allowed" : "cursor-pointer",
+            )}
+          />
+        );
+      })}
+    </SliderPrimitive.Root>
+  );
+});
+
+Slider.displayName = "Slider";
+
+export default Slider;

src/components/input-elements/Slider/index.ts

@@ -0,0 +1,2 @@
+export { default as Slider } from "./Slider";
+export type { SliderProps } from "./Slider";

src/components/input-elements/index.ts

@@ -6,6 +6,7 @@ export * from "./NumberInput";
 export * from "./SearchSelect";
 export * from "./Select";
 export * from "./Switch";
+export * from "./Slider";
 export * from "./Tabs";
 export * from "./Textarea";
 export * from "./TextInput";

src/stories/input-elements/Slider.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Slider } from "components";
+import { SimpleSlider } from "./helpers/SimpleSlider";
+
+const meta: Meta<typeof Slider> = {
+  title: "UI/Input/Slider",
+  component: Slider,
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const Uncontrolled: Story = {
+  args: {},
+};
+
+export const WithValue: Story = {
+  args: {
+    value: [50],
+  },
+};
+
+export const Controlled: Story = {
+  render: SimpleSlider,
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    defaultValue: [50],
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: [50],
+    disabled: true,
+  },
+};
+
+export const WithRange: Story = {
+  args: {
+    defaultValue: [50, 75],
+  },
+};
+
+export const CustomColor: Story = {
+  args: {
+    color: "emerald",
+  },
+};
+
+export const WithStep: Story = {
+  args: {
+    step: 10,
+  },
+};
+
+export const Vertical: Story = {
+  render: SimpleSlider,
+  args: {
+    orientation: "vertical",
+  },
+};
+
+export const Inverted: Story = {
+  args: {
+    inverted: true,
+  },
+};

src/stories/input-elements/helpers/SimpleSlider.tsx

@@ -0,0 +1,13 @@
+import { Card, Slider } from "components";
+import React from "react";
+
+export const SimpleSlider = (args: any) => {
+  const [value, setValue] = React.useState([10]);
+
+  return (
+    <Card className="h-44">
+      <Slider {...args} value={value} onValueChange={setValue} />
+      <span>{value}</span>
+    </Card>
+  );
+};