Slider

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Slider } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6const styles = stylex.create({ slider: { width: "100%", maxWidth: 320 } });7export function Default() {8  return (9    <Slider xstyle={styles.slider} defaultValue={30}>10      <Slider.Label>Volume</Slider.Label>11      <Slider.Output />12      <Slider.Control>13        <Slider.Track>14          <Slider.Fill />15        </Slider.Track>16        <Slider.Thumb aria-label="Volume" />17      </Slider.Control>18    </Slider>19  );20}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Slider } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ root: { width: "100%", maxWidth: "20rem" } });6export function Disabled() {7  return (8    <Slider disabled xstyle={styles.root} defaultValue={30}>9      <Slider.Label>Volume</Slider.Label>10      <Slider.Output />11      <Slider.Control>12        <Slider.Track>13          <Slider.Fill />14        </Slider.Track>15        <Slider.Thumb />16      </Slider.Control>17    </Slider>18  );19}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Slider } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  wrapper: { display: "flex", height: "16rem", alignItems: "center", justifyContent: "center" },7  root: { height: "100%" },8});9export function Vertical() {10  return (11    <div {...stylex.props(styles.wrapper)}>12      <Slider xstyle={styles.root} defaultValue={30} orientation="vertical">13        <Slider.Label>Volume</Slider.Label>14        <Slider.Output />15        <Slider.Control>16          <Slider.Track>17            <Slider.Fill />18          </Slider.Track>19          <Slider.Thumb />20        </Slider.Control>21      </Slider>22    </div>23  );24}

1"use client";2/**3 * Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.04 * Native Base UI control geometry and value formatting.5 */6import { Slider } from "@lenso/ui";7import * as stylex from "@stylexjs/stylex";8
9const styles = stylex.create({ root: { width: "100%", maxWidth: "20rem" } });10
11export function Range() {12  return (13    <Slider14      xstyle={styles.root}15      defaultValue={[100, 500]}16      format={{ currency: "USD", style: "currency" }}17      max={1000}18      min={0}19      step={50}20    >21      <Slider.Label>Price Range</Slider.Label>22      <Slider.Output>{(formattedValues) => formattedValues.join(" – ")}</Slider.Output>23      <Slider.Control>24        <Slider.Track>25          <Slider.Fill />26        </Slider.Track>27        <Slider.Thumb index={0} aria-label="Minimum price" />28        <Slider.Thumb index={1} aria-label="Maximum price" />29      </Slider.Control>30    </Slider>31  );32}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Slider } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ root: { width: "100%", maxWidth: "20rem" } });6export function RenderFunction() {7  return (8    <Slider9      xstyle={styles.root}10      defaultValue={30}11      render={(props) => <div {...props} data-custom="foo" />}12    >13      <Slider.Label>Volume</Slider.Label>14      <Slider.Output />15      <Slider.Control>16        <Slider.Track>17          <Slider.Fill />18        </Slider.Track>19        <Slider.Thumb />20      </Slider.Control>21    </Slider>22  );23}

1"use client";2/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */3import { Slider } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  root: { width: "100%", maxWidth: "20rem" },7  label: { fontWeight: 500, color: "var(--foreground)" },8  output: { fontSize: ".75rem", color: "var(--muted)", fontVariantNumeric: "tabular-nums" },9  track: { backgroundColor: "var(--default)" },10  fill: { backgroundColor: "var(--accent)" },11  thumb: {12    backgroundColor: "var(--accent)",13    "::after": { backgroundColor: "var(--accent-foreground)" },14  },15});16export function CustomStyles() {17  return (18    <Slider xstyle={styles.root} defaultValue={40}>19      <Slider.Label xstyle={styles.label}>Brightness</Slider.Label>20      <Slider.Output xstyle={styles.output} />21      <Slider.Control>22        <Slider.Track xstyle={styles.track}>23          <Slider.Fill xstyle={styles.fill} />24        </Slider.Track>25        <Slider.Thumb xstyle={styles.thumb} />26      </Slider.Control>27    </Slider>28  );29}