ColorSlider

1"use client";2
3import { ColorSlider } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6const styles = stylex.create({ slider: { width: "100%", maxWidth: 320 } });7export function Basic() {8  return (9    <ColorSlider10      aria-label="Hue"11      channel="hue"12      xstyle={styles.slider}13      defaultValue="hsl(0, 100%, 50%)"14    >15      <span>Hue</span>16      <ColorSlider.Output />17      <ColorSlider.Track>18        <ColorSlider.Thumb />19      </ColorSlider.Track>20    </ColorSlider>21  );22}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorSlider } from "@lenso/ui";4import { styles } from "../color-picker/source.stylex";5export function Disabled() {6  return (7    <ColorSlider isDisabled channel="hue" xstyle={styles.xs} defaultValue="hsl(200, 100%, 50%)">8      <ColorSlider.Label>Hue</ColorSlider.Label>9      <ColorSlider.Output />10      <ColorSlider.Track>11        <ColorSlider.Thumb />12      </ColorSlider.Track>13    </ColorSlider>14  );15}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorSlider } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function Vertical() {7  return (8    <div {...stylex.props(styles.vertical)}>9      {(["hue", "saturation", "lightness"] as const).map((channel) => (10        <ColorSlider11          key={channel}12          aria-label={channel}13          channel={channel}14          defaultValue="hsl(0, 100%, 50%)"15          orientation="vertical"16        >17          <ColorSlider.Track>18            <ColorSlider.Thumb />19          </ColorSlider.Track>20        </ColorSlider>21      ))}22    </div>23  );24}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorSlider, ColorSwatch, parseColor } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { styles } from "../color-picker/source.stylex";7export function Controlled() {8  const [color, setColor] = useState(parseColor("hsl(200, 100%, 50%)"));9  return (10    <div {...stylex.props(styles.column, styles.xs)}>11      <ColorSlider channel="hue" value={color} onChange={setColor}>12        <ColorSlider.Label>Hue</ColorSlider.Label>13        <ColorSlider.Output />14        <ColorSlider.Track>15          <ColorSlider.Thumb />16        </ColorSlider.Track>17      </ColorSlider>18      <div {...stylex.props(styles.row2)}>19        <ColorSwatch color={color} size="sm" />20        <p {...stylex.props(styles.muted)}>21          Current color: <code {...stylex.props(styles.mono)}>{color.toString("hsl")}</code>22        </p>23      </div>24    </div>25  );26}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorSlider, ColorSwatch, parseColor } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { styles } from "../color-picker/source.stylex";7export function Channels() {8  const [color, setColor] = useState(parseColor("hsl(0, 100%, 50%)"));9  return (10    <div {...stylex.props(styles.column, styles.xs)}>11      {(["hue", "saturation", "lightness"] as const).map((channel) => (12        <ColorSlider key={channel} channel={channel} value={color} onChange={setColor}>13          <ColorSlider.Label xstyle={styles.capitalize}>{channel}</ColorSlider.Label>14          <ColorSlider.Output />15          <ColorSlider.Track>16            <ColorSlider.Thumb />17          </ColorSlider.Track>18        </ColorSlider>19      ))}20      <div {...stylex.props(styles.row2)}>21        <ColorSwatch color={color} size="sm" />22        <p {...stylex.props(styles.muted)}>23          Current color: <code {...stylex.props(styles.mono)}>{color.toString("hsl")}</code>24        </p>25      </div>26    </div>27  );28}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorSlider } from "@lenso/ui";4import { styles } from "../color-picker/source.stylex";5export function AlphaChannel() {6  return (7    <ColorSlider channel="alpha" xstyle={styles.xs} defaultValue="hsla(0, 100%, 50%, 0.5)">8      <ColorSlider.Label>Alpha</ColorSlider.Label>9      <ColorSlider.Output />10      <ColorSlider.Track>11        <ColorSlider.Thumb />12      </ColorSlider.Track>13    </ColorSlider>14  );15}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorSlider, ColorSwatch, parseColor } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { styles } from "../color-picker/source.stylex";7export function RGBChannels() {8  const [color, setColor] = useState(parseColor("rgb(255, 100, 50)"));9  return (10    <div {...stylex.props(styles.column, styles.xs)}>11      {(["red", "green", "blue"] as const).map((channel) => (12        <ColorSlider key={channel} channel={channel} value={color} onChange={setColor}>13          <ColorSlider.Label xstyle={styles.capitalize}>{channel}</ColorSlider.Label>14          <ColorSlider.Output />15          <ColorSlider.Track>16            <ColorSlider.Thumb />17          </ColorSlider.Track>18        </ColorSlider>19      ))}20      <div {...stylex.props(styles.row2)}>21        <ColorSwatch color={color} size="sm" />22        <p {...stylex.props(styles.muted)}>23          Current color: <code {...stylex.props(styles.mono)}>{color.toString("rgb")}</code>24        </p>25      </div>26    </div>27  );28}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. Native RAC render state replaces DOM render interception. */3import { ColorSlider } from "@lenso/ui";4import { styles } from "../color-picker/source.stylex";5export function RenderFunction() {6  return (7    <ColorSlider8      channel="hue"9      xstyle={styles.xs}10      defaultValue="hsl(0, 100%, 50%)"11      data-custom="foo"12    >13      {({ isDisabled }) => (14        <>15          <ColorSlider.Label>Hue</ColorSlider.Label>16          <ColorSlider.Output />17          <ColorSlider.Track>18            <ColorSlider.Thumb data-disabled={isDisabled || undefined} />19          </ColorSlider.Track>20        </>21      )}22    </ColorSlider>23  );24}

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorSlider } from "@lenso/ui";4import { styles } from "../color-picker/source.stylex";5export function CustomStyles() {6  return (7    <ColorSlider channel="hue" xstyle={styles.sm} defaultValue="hsl(220, 70%, 50%)">8      <ColorSlider.Label xstyle={styles.label}>Hue</ColorSlider.Label>9      <ColorSlider.Output xstyle={styles.tabular} />10      <ColorSlider.Track xstyle={styles.track}>11        <ColorSlider.Thumb xstyle={styles.thumb} />12      </ColorSlider.Track>13    </ColorSlider>14  );15}