V2 Slider Update (#308)

* Enhance Slider component with new features and styles

* refactor Slider component to remove isRange state and enhance value handling

* fix: use constant instead of signal read

* refactor Slider component to simplify value handling and update hidden input rendering

* refactor Slider component to improve rendering logic and streamline input handling

* refactor Slider component tests to remove unused styles and streamline code

* refactor Slider component to standardize value handling and improve context usage

* refactor SliderLabel component to replace Label with Render for improved rendering flexibility

* chore: remove unused dependency '@oxc-parser/binding-darwin-arm64' from package.json and pnpm-lock.yaml

Author: toan-kunaico

docs/src/routes/components/slider/examples/form.tsx

@@ -0,0 +1,46 @@
+import { Slider } from "@qds.dev/ui";
+import { component$, useSignal, useStyles$ } from "@qwik.dev/core";
+import styles from "./slider-custom.css?inline";
+
+export default component$(() => {
+  useStyles$(styles);
+
+  const formData = useSignal<Record<string, FormDataEntryValue>>();
+
+  return (
+    <form
+      preventdefault:submit
+      onSubmit$={(e) => {
+        const form = e.target as HTMLFormElement;
+        formData.value = Object.fromEntries(new FormData(form));
+      }}
+      class="flex flex-col gap-4"
+    >
+      <VolumeSlider />
+      <button
+        type="submit"
+        class="px-4 py-2 cursor-pointer bg-blue-500 text-white rounded hover:bg-blue-600"
+      >
+        Submit
+      </button>
+      {formData.value && (
+        <div class="p-2 bg-gray-100 rounded">
+          Submitted: {JSON.stringify(formData.value, null, 2)}
+        </div>
+      )}
+    </form>
+  );
+});
+
+export const VolumeSlider = component$(() => {
+  return (
+    <Slider.Root name="volume" value={50} class="slider-root">
+      <Slider.Label>Volume</Slider.Label>
+      <Slider.Track class="slider-track">
+        <Slider.Range class="slider-range" />
+        <Slider.Thumb class="slider-thumb" />
+      </Slider.Track>
+      <Slider.HiddenInput />
+    </Slider.Root>
+  );
+});

libs/components/src/slider/index.ts

@@ -5,4 +5,5 @@ export { SliderRange as Range } from "./slider-range";
 export { SliderThumb as Thumb } from "./slider-thumb";
 export { SliderMarkerGroup as MarkerGroup } from "./slider-marker-group";
 export { SliderMarker as Marker } from "./slider-marker";
+export { SliderHiddenInput as HiddenInput } from "./slider-hidden-input";
 // export { SliderTooltip as Tooltip } from "./slider-tooltip";

libs/components/src/slider/slider-context.ts

@@ -4,8 +4,7 @@ export type ThumbType = "start" | "end";
 export type SliderValue = number | [number, number];
 
 export interface SliderContext {
-  isRange: Signal<boolean>;
-  value: Signal<SliderValue>;
+  sliderValue: Signal<SliderValue>;
   startValue: Signal<number>;
   endValue: Signal<number>;
   min: Signal<number>;
@@ -16,9 +15,9 @@ export interface SliderContext {
   setValue: QRL<(newValue: number, type?: ThumbType) => void>;
   calculateValue: QRL<(clientX: number, rect: DOMRect) => number>;
   thumbType: Signal<ThumbType | undefined>;
-  onChange$?: (value: SliderValue) => void;
-  onChangeEnd$?: (value: SliderValue) => void;
   localId: string;
+  name?: string;
+  required?: boolean;
 }
 
 export const sliderContextId = createContextId<SliderContext>("slider-context");

libs/components/src/slider/slider-hidden-input.tsx

@@ -0,0 +1,33 @@
+import { type PropsOf, component$, useComputed$, useContext } from "@qwik.dev/core";
+import { VisuallyHidden } from "../visually-hidden/visually-hidden";
+import { sliderContextId } from "./slider-context";
+
+type PublicSliderHiddenNativeInputProps = Omit<
+  PropsOf<"input">,
+  "type" | "value" | "min" | "max" | "step"
+>;
+
+export const SliderHiddenInput = component$(
+  (props: PublicSliderHiddenNativeInputProps) => {
+    const context = useContext(sliderContextId);
+
+    const stringValue = useComputed$(() => {
+      const value = context.sliderValue.value;
+      return Array.isArray(value) ? value.join(",") : String(value);
+    });
+
+    return (
+      <VisuallyHidden>
+        <input
+          {...props}
+          type="hidden"
+          tabIndex={-1}
+          data-qds-slider-hidden-input
+          name={context.name ?? props.name ?? undefined}
+          required={context.required ?? props.required ?? undefined}
+          value={stringValue.value}
+        />
+      </VisuallyHidden>
+    );
+  }
+);

libs/components/src/slider/slider-label.tsx

@@ -10,7 +10,7 @@ export const SliderLabel = component$((props: PublicLabelProps) => {
   const labelId = `${context.localId}-label`;
 
   return (
-    <Render {...props} id={labelId} data-qds-slider-label fallback="span">
+    <Render {...props} fallback="span" id={labelId} data-qds-slider-label>
       <Slot />
     </Render>
   );

libs/components/src/slider/slider-marker-group.tsx

@@ -1,11 +1,12 @@
 import { type PropsOf, Slot, component$ } from "@qwik.dev/core";
+import { Render } from "../render/render";
 
 /** A container component for slider markers */
 export const SliderMarkerGroup = component$((props: PropsOf<"div">) => {
   return (
     // Container element for grouping slider markers
-    <div {...props} data-qds-slider-marker-group>
+    <Render {...props} fallback="div" data-qds-slider-marker-group>
       <Slot />
-    </div>
+    </Render>
   );
 });

libs/components/src/slider/slider-marker.tsx

@@ -1,4 +1,5 @@
 import { type PropsOf, Slot, component$, useComputed$, useContext } from "@qwik.dev/core";
+import { Render } from "../render/render";
 import { sliderContextId } from "./slider-context";
 interface PublicMarkerProps extends PropsOf<"div"> {
   /** The value at which to place the marker on the slider track */
@@ -14,13 +15,14 @@ export const SliderMarker = component$((props: PublicMarkerProps) => {
   });
 
   return (
-    <div
+    <Render
       {...rest}
+      fallback="div"
       // Individual marker element representing a specific value on the slider
       data-qds-slider-marker
       style={{ left: `${markerPosition.value}%` }}
     >
       <Slot />
-    </div>
+    </Render>
   );
 });

libs/components/src/slider/slider-range.tsx

@@ -1,4 +1,5 @@
 import { type PropsOf, component$, useComputed$, useContext } from "@qwik.dev/core";
+import { Render } from "../render/render";
 import { sliderContextId } from "./slider-context";
 
 /** Component that displays the filled range between min value and current value */
@@ -9,9 +10,10 @@ export const SliderRange = component$((props: PropsOf<"div">) => {
     const range = context.max.value - context.min.value;
     if (range === 0) return { left: "0%", width: "0%" };
 
-    if (!context.isRange.value) {
+    // Check if this is a range slider by checking if value is an array
+    if (!Array.isArray(context.sliderValue.value)) {
       const percentage =
-        (((context.value.value as number) - context.min.value) / range) * 100;
+        (((context.sliderValue.value as number) - context.min.value) / range) * 100;
       return {
         left: "0%",
         width: `${Math.min(100, Math.max(0, percentage))}%`
@@ -29,8 +31,9 @@ export const SliderRange = component$((props: PropsOf<"div">) => {
   });
 
   return (
-    <div
+    <Render
       {...props}
+      fallback="div"
       // Visual indicator showing the selected range between minimum and maximum values
       data-qds-slider-range
       style={styles.value}