Slider

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider min={0} max={100} defaultValues={[50]} getAccessibilityLabel={() => "값"} />
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-basic">
        <Slider min={0} max={10} defaultValues={[5]} getAccessibilityLabel={() => "값"} />
        <Slider min={0} max={1000} defaultValues={[600]} getAccessibilityLabel={() => "값"} />
      </view>
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [value, setValue] = useState([50]);

  function handleValuesChange(nextValues: number[]) {
    "background only";
    setValue(nextValues);
  }

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={100}
          step={10}
          values={value}
          onValuesChange={handleValuesChange}
          getAccessibilityLabel={() => "값"}
        />
        <text className="slider-preview__status">{JSON.stringify(value)}</text>
      </view>
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

const ALLOWED_VALUES = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29];

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [values, setValues] = useState([ALLOWED_VALUES[0], ALLOWED_VALUES[2]]);

  function handleValuesChange(nextValues: number[]) {
    "background only";
    setValues(nextValues);
  }

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={30}
          values={values}
          onValuesChange={handleValuesChange}
          allowedValues={ALLOWED_VALUES}
          markers={ALLOWED_VALUES.map((value) => ({ label: value, value }))}
          getAccessibilityLabel={() => "값"}
        />
        <text className="slider-preview__status">{JSON.stringify(values)}</text>
      </view>
    </view>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";
import { useSeedClassName } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={100}
          step={0.1}
          defaultValues={[50]}
          ticks={[10, 20, 30, 40, 50, 60, 70, 80, 90]}
          tickWeight="thin"
          getAccessibilityLabel={() => "값"}
        />
      </view>
    </view>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";
import { useSeedClassName } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={100}
          step={10}
          defaultValues={[50]}
          ticks={[10, 20, 30, 40, 50, 60, 70, 80, 90]}
          tickWeight="thick"
          getAccessibilityLabel={() => "값"}
        />
      </view>
    </view>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";
import { useSeedClassName } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={100}
          defaultValues={[50]}
          markers={[
            { value: 0, label: "0°C" },
            { value: 25, label: "25°C" },
            { value: 50, label: "50°C" },
            { value: 75, label: "75°C" },
            { value: 100, label: "100°C" },
          ]}
          getAccessibilityValueText={(value) => `${value}°C`}
          getValueIndicatorLabel={({ value }) => `${value}°C`}
          getAccessibilityLabel={() => "온도"}
        />
        <Slider
          min={0}
          max={100}
          defaultValues={[30]}
          markers={[0, 20, 40, 60, 80, 100]}
          getAccessibilityLabel={() => "값"}
        />
      </view>
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

const DEFAULT_VALUE = [50];

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [value, setValue] = useState(DEFAULT_VALUE);
  function handleValuesChange(nextValues: number[]) {
    "background only";
    setValue(nextValues);
  }

  function handleSetMin() {
    "background only";
    setValue([0]);
  }

  function handleReset() {
    "background only";
    setValue(DEFAULT_VALUE);
  }

  function handleSetMax() {
    "background only";
    setValue([100]);
  }

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={100}
          values={value}
          onValuesChange={handleValuesChange}
          getAccessibilityLabel={() => "값"}
        />
        <text className="slider-preview__status">{JSON.stringify(value)}</text>
        <view className="slider-preview__actions">
          <view
            className="slider-preview__button"
            bindtap={handleSetMin}
            accessibility-label="Set Min"
          >
            <text>Set Min</text>
          </view>
          <view
            className="slider-preview__button"
            bindtap={handleReset}
            accessibility-label="Reset"
          >
            <text>Reset</text>
          </view>
          <view
            className="slider-preview__button"
            bindtap={handleSetMax}
            accessibility-label="Set Max"
          >
            <text>Set Max</text>
          </view>
        </view>
      </view>
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [value, setValue] = useState([20]);
  const [committedValue, setCommittedValue] = useState([20]);

  function handleValuesChange(nextValues: number[]) {
    "background only";
    setValue(nextValues);
  }

  function handleValuesCommit(nextValues: number[]) {
    "background only";
    setCommittedValue(nextValues);
  }

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={100}
          values={value}
          onValuesChange={handleValuesChange}
          onValuesCommit={handleValuesCommit}
          getAccessibilityLabel={() => "값"}
        />
        <view className="slider-preview__status">
          <text>Current value: {JSON.stringify(value)}</text>
          <text>Committed value: {JSON.stringify(committedValue)}</text>
        </view>
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

export default function SliderDisabled() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={100}
          defaultValues={[50]}
          disabled
          getAccessibilityLabel={() => "값"}
        />
        <Slider
          min={0}
          max={100}
          defaultValues={[25, 75]}
          disabled
          getAccessibilityLabel={(thumbIndex) => (thumbIndex === 0 ? "최소값" : "최대값")}
        />
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

export default function SliderHideRange() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={100}
          defaultValues={[60]}
          hideRange
          getAccessibilityLabel={() => "값"}
        />
        <Slider
          min={0}
          max={100}
          defaultValues={[20, 80]}
          hideRange
          getAccessibilityLabel={(thumbIndex) => (thumbIndex === 0 ? "최소값" : "최대값")}
        />
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

const formatter = new Intl.NumberFormat("ko-KR", { style: "decimal" });

export default function SliderCustomValueIndicatorLabel() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={1_000_000}
          defaultValues={[20_000, 500_000]}
          getValueIndicatorLabel={({ value, thumbIndex }) => (
            <text>{`thumb ${thumbIndex}\n${formatter.format(value)}`}</text>
          )}
          getAccessibilityValueText={formatter.format}
          getAccessibilityLabel={() => "값"}
        />
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

export default function SliderValueIndicatorTrigger() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          label="auto (default)"
          min={0}
          max={100}
          defaultValues={[50]}
          valueIndicatorTrigger="auto"
          getAccessibilityLabel={() => "값"}
        />
        <Slider
          label="active"
          min={0}
          max={100}
          defaultValues={[50]}
          valueIndicatorTrigger="active"
          getAccessibilityLabel={() => "값"}
        />
        <text className="slider-preview__status">
          auto와 active 모두 터치로 활성화된 동안에만 값 표시
        </text>
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

export default function SliderHideValueIndicator() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={100}
          defaultValues={[50]}
          hideValueIndicator
          getAccessibilityLabel={() => "값"}
        />
      </view>
    </view>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";
import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [priceRange, setPriceRange] = useState([20, 80]);

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={100}
          values={priceRange}
          onValuesChange={setPriceRange}
          getAccessibilityLabel={(thumbIndex) => (thumbIndex === 0 ? "최소값" : "최대값")}
        />
      </view>
    </view>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";
import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [values, setValues] = useState([20, 80]);

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={100}
          values={values}
          onValuesChange={setValues}
          step={5}
          minStepsBetweenThumbs={6}
          getAccessibilityLabel={(thumbIndex) => (thumbIndex === 0 ? "최소값" : "최대값")}
        />
        <text>{JSON.stringify(values)}</text>
      </view>
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

const days = ["일", "월", "화", "수", "목", "금", "토"];

function getHumanReadableDayOfWeek(value: number) {
  if (days[value] === undefined) throw new Error("Invalid day value");

  return `${days[value]}요일`;
}

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [values, setValues] = useState([1, 3]);

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={days.length - 1}
          minStepsBetweenThumbs={1}
          markers={days.map((label, value) => ({ label, value }))}
          ticks={days.slice(1, -1).map((_, index) => index + 1)}
          tickWeight="thick"
          values={values}
          onValuesChange={setValues}
          getAccessibilityLabel={(thumbIndex) => (thumbIndex === 0 ? "시작" : "종료")}
          getAccessibilityValueText={getHumanReadableDayOfWeek}
          getValueIndicatorLabel={({ value }) => getHumanReadableDayOfWeek(value)}
        />
        <text className="slider-preview__status">values: {JSON.stringify(values)}</text>
        <text className="slider-preview__status">
          accessibility-value-text: {JSON.stringify(values.map(getHumanReadableDayOfWeek))}
        </text>
      </view>
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

const getAccessibilityLabel = (thumbIndex: number) => (thumbIndex === 0 ? "최소값" : "최대값");

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [values, setValues] = useState([10, 30]);

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          min={0}
          max={100}
          values={values}
          onValuesChange={setValues}
          getAccessibilityLabel={getAccessibilityLabel}
        />
        <text className="slider-preview__status">values: {JSON.stringify(values)}</text>
        <text className="slider-preview__status">
          accessibility-label:{" "}
          {JSON.stringify(values.map((_, index) => getAccessibilityLabel(index)))}
        </text>
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

const markers = [
  { value: 0, label: "매우 동의하지 않음" },
  { value: 14, label: "매우 동의함" },
];

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          label="내일 날씨가 좋을 것 같다고 생각한다."
          min={0}
          max={14}
          defaultValues={[7]}
          ticks={[2, 4, 6, 8, 10, 12]}
          markers={markers}
          hideRange
          description="내일 날씨에 대한 당신의 기대감을 0~14 사이 숫자로 나타내 주세요."
          getAccessibilityValueText={(value) =>
            `${value} ${markers.find((marker) => marker.value === value)?.label ?? ""}`.trim()
          }
        />
        <Slider
          label="Invalid Slider"
          labelWeight="bold"
          min={0}
          max={1000}
          defaultValues={[500]}
          invalid
          errorMessage="올바르지 않은 값입니다."
        />
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { Slider } from "@/components/ui/slider";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-slider-root`}>
      <view className="slider-preview">
        <Slider
          dir="rtl"
          min={0}
          max={100}
          step={0.5}
          defaultValues={[36.5]}
          ticks={[36.5]}
          tickWeight="thick"
          markers={[
            { value: 0, label: "0°C" },
            { value: 36.5, label: "36.5°C" },
            { value: 100, label: "100°C" },
          ]}
          getAccessibilityValueText={(value) => `${value}°C`}
          getValueIndicatorLabel={({ value }) => `${value}°C`}
          getAccessibilityLabel={() => "온도"}
        />
        <Slider
          dir="rtl"
          min={0}
          max={100}
          defaultValues={[30, 50]}
          ticks={[20, 40, 60, 80]}
          markers={[0, 20, 40, 60, 80, 100]}
          getAccessibilityLabel={() => "값"}
        />
      </view>
    </view>
  );
}