Slider

import { styled } from "styled-system/jsx";
import { Slider } from "@/components/ui/slider";

export default function SliderDemo() {
  return (
    <styled.div
      css={{
        display: "flex",
        w: "full",
        maxW: "sm",
        flexDir: "column",
        flexWrap: "wrap",
        gap: "6",
        md: { flexDir: "row" },
      }}
    >
      <Slider defaultValue={[50]} max={100} step={1} />
      <Slider defaultValue={[25, 50]} max={100} step={1} />
      <Slider defaultValue={[10, 20]} max={100} step={10} />
    </styled.div>
  );
}

import { styled } from "styled-system/jsx";
import { Slider } from "@/components/ui/slider";

export default function SliderVertical() {
  return (
    <styled.div
      css={{ display: "flex", w: "full", alignItems: "center", justifyContent: "center", gap: "6" }}
    >
      <Slider defaultValue={[50]} max={100} step={1} orientation="vertical" />
      <Slider defaultValue={[25]} max={100} step={1} orientation="vertical" />
    </styled.div>
  );
}

"use client";

import * as React from "react";
import { styled } from "styled-system/jsx";
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";

export default function SliderControlled() {
  const [value, setValue] = React.useState([0.3, 0.7]);

  return (
    <styled.div css={{ display: "grid", w: "full", gap: "3" }}>
      <styled.div
        css={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "2" }}
      >
        <Label htmlFor="slider-demo-temperature">Temperature</Label>
        <styled.span css={{ color: "muted.fg", textStyle: "sm" }}>{value.join(", ")}</styled.span>
      </styled.div>
      <Slider
        id="slider-demo-temperature"
        value={value}
        onValueChange={setValue}
        min={0}
        max={1}
        step={0.1}
      />
    </styled.div>
  );
}