Rebuild demo

demo/app/components.tsx

@@ -27,6 +27,7 @@ export function ColorConvert() {
       <div className={styles.ColorConvert}>
         <div className={styles.ColorSelect}>
           <ColorSlider
+            label="Select grayscale color"
             scaleImage={`${basePath}/grayscale.png`}
             value={value}
             onChange={setValue}
@@ -54,6 +55,7 @@ export function ColorConvert() {
         </div>
         <div className={styles.ColorSelect}>
           <ColorSlider
+            label="Select Turbo color"
             scaleImage={`${basePath}/turbo.png`}
             value={value}
             onChange={setValue}

demo/app/page.tsx

@@ -75,8 +75,8 @@ const DemoPage = () => {
           Snap arbitrary colors to the indexed Turbo palette. This can yield
           surprising results with much of the sRGB color space; it’s mostly
           useful for interpreting visual­izations exported with an
-          approx­imation of Turbo or a lossy format like JPEG, where the
-          colors won’t be in the Turbo lookup table.
+          approx­imation of Turbo or a lossy format like JPEG, where not
+          every pixel will be in the Turbo lookup table.
         </p>
         <p className={styles.Description}>
           The nearest color is determined by simple Euclidian distance using a

demo/src/ColorSlider.tsx

@@ -15,12 +15,14 @@ const toGradientStops = (colorStops: Color[]) => {
 };
 
 export default function ColorSlider({
+  label = "Select color",
   className,
   colorStops,
   scaleImage,
   value: valueFromProps,
   onChange,
 }: {
+  label?: string;
   className?: string;
   colorStops?: Color[];
   scaleImage?: string;
@@ -35,18 +37,20 @@ export default function ColorSlider({
       return {
         "--color-gradient": `url("${scaleImage}")`,
       } as React.CSSProperties;
-    } else {
+    } else if (colorStops) {
       const colorString = toGradientStops(colorStops).join(", ");
       return {
         "--color-gradient": `linear-gradient(to right, ${colorString})`,
       } as React.CSSProperties;
+    } else {
+      return {};
     }
   }, [colorStops, scaleImage]);
 
   return (
     <div className={`${styles.Container} ${className ?? ""}`}>
       <Range
-        label="Select your value"
+        label={label}
         step={1}
         min={0}
         max={255}