Slider

import "./styles";

import { Slider } from "@/components/ui/slider";

export default function Example() {
  return (
    <view className="slider-preview">
      <Slider min={0} max={100} defaultValues={[50]} getAccessibilityLabel={() => "값"} />
    </view>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";

export default function Example() {
  return (
    <view className="slider-basic">
      <Slider min={0} max={10} defaultValues={[5]} getAccessibilityLabel={() => "값"} />
      <Slider min={0} max={1000} defaultValues={[600]} getAccessibilityLabel={() => "값"} />
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";

import { Slider } from "@/components/ui/slider";

export default function Example() {
  const [value, setValue] = useState([50]);

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

  return (
    <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>
  );
}

import "./styles";

import { useState } from "@lynx-js/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 [values, setValues] = useState([ALLOWED_VALUES[0], ALLOWED_VALUES[2]]);

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

  return (
    <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>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";

export default function Example() {
  return (
    <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>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";

export default function Example() {
  return (
    <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>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";

export default function Example() {
  return (
    <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>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";

import { Slider } from "@/components/ui/slider";

const DEFAULT_VALUE = [50];

export default function Example() {
  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="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>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";

import { Slider } from "@/components/ui/slider";

export default function Example() {
  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="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>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";

export default function SliderDisabled() {
  return (
    <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>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";

export default function SliderHideRange() {
  return (
    <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>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";

// Lynx JS 런타임에는 `Intl`이 없으므로 천 단위 구분 기호를 직접 넣습니다.
function formatNumber(value: number) {
  return String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

export default function SliderCustomValueIndicatorLabel() {
  return (
    <view className="slider-preview">
      <Slider
        min={0}
        max={1_000_000}
        defaultValues={[20_000, 500_000]}
        getValueIndicatorLabel={({ value, thumbIndex }) => (
          <text>{`thumb ${thumbIndex}\n${formatNumber(value)}`}</text>
        )}
        getAccessibilityValueText={formatNumber}
        getAccessibilityLabel={() => "값"}
      />
    </view>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";

export default function SliderValueIndicatorTrigger() {
  return (
    <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>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";

export default function SliderHideValueIndicator() {
  return (
    <view className="slider-preview">
      <Slider
        min={0}
        max={100}
        defaultValues={[50]}
        hideValueIndicator
        getAccessibilityLabel={() => "값"}
      />
    </view>
  );
}

import "./styles";

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

export default function Example() {
  const [priceRange, setPriceRange] = useState([20, 80]);

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

import "./styles";

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

export default function Example() {
  const [values, setValues] = useState([20, 80]);

  return (
    <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>
  );
}

import "./styles";

import { useState } from "@lynx-js/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 [values, setValues] = useState([1, 3]);

  return (
    <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>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";

import { Slider } from "@/components/ui/slider";

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

export default function Example() {
  const [values, setValues] = useState([10, 30]);

  return (
    <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>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";

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

export default function Example() {
  return (
    <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>
  );
}

import "./styles";

import { Slider } from "@/components/ui/slider";

export default function Example() {
  return (
    <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>
  );
}