Slider

슬라이더 컴포넌트는 숫자를 선택할 수 있는 컴포넌트입니다.

기본 사용법

0100

import { Slider } from '@aift/ui/Slider';

export default function Preview() {
  return  <div className="max-w-md space-y-4">
    <Slider showLabels min={0} max={100} step={1} />
  </div>;
}

import { Slider } from '@aift/ui/Slider';export default function Preview() {  return  <div className="max-w-md space-y-4">    <Slider showLabels min={0} max={100} step={1} />  </div>;}

Color

0100

'use client';

import { Slider } from '@aift/ui/Slider';

export default function Color() {
  return (
    <div className="max-w-md space-y-4">
      <Slider showLabels min={0} max={100} step={1} defaultValue={[10]} color="primary" />
      <Slider showLabels min={0} max={100} step={1} defaultValue={[30]} color="positive" />
      <Slider showLabels min={0} max={100} step={1} defaultValue={[50]} color="cautionary" />
      <Slider showLabels min={0} max={100} step={1} defaultValue={[70]} color="destructive" />
      <Slider showLabels min={0} max={100} step={1} defaultValue={[90]} color="info" />
    </div>
  );
}

'use client';import { Slider } from '@aift/ui/Slider';export default function Color() {  return (    <div className="max-w-md space-y-4">      <Slider showLabels min={0} max={100} step={1} defaultValue={[10]} color="primary" />      <Slider showLabels min={0} max={100} step={1} defaultValue={[30]} color="positive" />      <Slider showLabels min={0} max={100} step={1} defaultValue={[50]} color="cautionary" />      <Slider showLabels min={0} max={100} step={1} defaultValue={[70]} color="destructive" />      <Slider showLabels min={0} max={100} step={1} defaultValue={[90]} color="info" />    </div>  );}

ShowLabels

0100

'use client';

import { Slider } from '@aift/ui/Slider';

export default function ShowLabels() {
  return (
    <div className="flex flex-col max-w-md space-y-4 gap-4">
      <Slider showLabels={false} min={0} max={100} step={1} value={[10, 20]} />
      <Slider showLabels min={0} max={100} step={1} />
    </div>
  );
}

'use client';import { Slider } from '@aift/ui/Slider';export default function ShowLabels() {  return (    <div className="flex flex-col max-w-md space-y-4 gap-4">      <Slider showLabels={false} min={0} max={100} step={1} value={[10, 20]} />      <Slider showLabels min={0} max={100} step={1} />    </div>  );}

Props

Prop	Type	Default	Description
showLabels	`boolean`	`false`	슬라이더의 레이블 표시 여부
value	`number`	`0`	슬라이더의 값
min	`number`	`0`	슬라이더의 최소값
max	`number`	`100`	슬라이더의 최대값
step	`number`	`1`	슬라이더의 스텝
color	`'primary' \| 'positive' \| 'cautionary' \| 'destructive' \| 'info'`	`'primary'`	슬라이더의 색상

Slider

기본 사용법

Color

ShowLabels

Props

On this page