Add more test options for slider

Test slider tick marks for out of bounds.

packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx

@@ -167,12 +167,17 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
             tickMarkLabel.style.writingMode = 'sideways-lr';
           }
         }
-        console.log(tickMarkWrapper);
       });
     }
   }, [ref, orient, browser]);
 
   const block = typeof length === 'string' && length.trim() === '100%';
+  const minValue = Number(min);
+  const maxValue = Number(max);
+
+  if (minValue >= maxValue) {
+    return null;
+  }
 
   return (
     <>
@@ -194,7 +199,6 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
           orient !== 'vertical' && 'inline-block min-h-[1rem]',
           orient === 'vertical' && 'inline-block min-w-[1rem]',
           orient !== 'vertical' && !block && 'min-w-[16rem]',
-          //orient === 'vertical' && 'inline-block min-h-[16rem] min-w-[1rem]',
         )}
         style={style}
       >
@@ -214,8 +218,8 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
             <input
               {...etcProps}
               ref={ref}
-              min={min}
-              max={max}
+              min={minValue}
+              max={maxValue}
               type="range"
               list={children ? tickMarkId : undefined}
               className={clsx(
@@ -228,27 +232,37 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
             {Array.isArray(children) && (
               <div className="select-none">
                 <div className="relative w-full h-full">
-                  {children.map((c) => (
-                    <div
-                      key={c.props.value}
-                      className={clsx(
-                        styles['tick-mark'],
-                        'absolute w-full h-full box-border',
-                      )}
-                      data-offset={`${(Number(c.props.value) - Number(min)) / (Number(max) - Number(min)) * 100}%`}
-                    >
-                      <div
-                        className="flex h-full text-xs items-center justify-between"
-                      >
-                        <div
-                          className="bg-current"
-                        />
-                        <div>
-                          {c.props.children}
-                        </div>
-                      </div>
-                    </div>
-                  ))}
+                  {
+                    children
+                      .filter((c) => {
+                        const value = Number(c.props.value);
+                        return minValue <= value && value <= maxValue;
+                      })
+                      .map((c) => {
+                        const value = Number(c.props.value);
+                        return (
+                          <div
+                            key={c.props.value}
+                            className={clsx(
+                              styles['tick-mark'],
+                              'absolute w-full h-full box-border',
+                            )}
+                            data-offset={`${(value - minValue) / (maxValue - minValue) * 100}%`}
+                          >
+                            <div
+                              className="flex h-full text-xs items-center justify-between"
+                            >
+                              <div
+                                className="bg-current"
+                              />
+                              <div>
+                                {c.props.children}
+                              </div>
+                            </div>
+                          </div>
+                        )
+                      })
+                  }
                 </div>
               </div>
             )}

packages/web-kitchensink-reactnext/src/pages/categories/number/index.tsx

@@ -28,10 +28,19 @@ const NumberPage: NextPage = () => {
             min={-100}
             max={100}
           >
+            <option value={-100}>
+              Lowest
+            </option>
             <option value={25}>
-              25
+              日本語
             </option>
             <option value={50} />
+            <option value={100}>
+              Highest
+            </option>
+            <option value={200}>
+              Out of bounds
+            </option>
           </TesseractNumber.Slider>
         </Subsection>
         <Subsection title="Vertical">
@@ -40,10 +49,19 @@ const NumberPage: NextPage = () => {
             max={100}
             orient="vertical"
           >
+            <option value={-100}>
+              Lowest
+            </option>
             <option value={25}>
               日本語
             </option>
             <option value={50} />
+            <option value={100}>
+              Highest
+            </option>
+            <option value={200}>
+              Out of bounds
+            </option>
           </TesseractNumber.Slider>
           A
         </Subsection>