Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Slider

범위 내의 입력 값을 조절할 수 있는 슬라이더 컴포넌트입니다.

import { Slider } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

범위 내의 입력 값을 조절할 때

사용예제

Value : 0

Basic Usage

기본적인 사용 방법입니다.

Value : 0

min & max Usage

최소값과 최대값을 설정할 수 있습니다.

import React, { useState } from 'react';
import { Slider } from 'sud-ui';

const MinMaxSlider = () => {
  const [value, setValue] = useState(0);

  return (
    <div>
      <Slider 
        value={value} 
        onChange={(e) => setValue(e)} 
        width="80%"
        min={0}
        max={40}
      />
      <div>Value : {value}</div>
    </div>
  );
};

export default MinMaxSlider;

Value : 0%

Unit

값의 단위를 설정할 수 있습니다.

import React, { useState } from 'react';
import { Slider } from 'sud-ui';

const unitSlider = () => {
  const [value, setValue] = useState(0);

  return (
    <div>
      <Slider 
        value={value} 
        onChange={(e) => setValue(e)} 
        width="80%"
        minMaxVisible={true}
        min={0}
        max={100}
        unit="%"
      />
      <div>Value : {value}%</div>
    </div>
  );
};

export default unitSlider;

Disabled

슬라이더를 비활성화 할 수 있습니다.

ThumbSize

슬라이더의 썸네일 크기를 설정할 수 있습니다.

Value : 0

Vertical

수직 방향 슬라이더 여부를 설정할 수 있습니다.

import React, { useState } from 'react';
import { Slider, Typography } from 'sud-ui';

const VerticalSlider = () => {
  const [value, setValue] = useState(0);

  return (
    <div className="grid grid-cols-3">
      <Slider
        value={value}
        onChange={(e) => setValue(e)}
        vertical={true}
      />
      <Slider
        value={value}
        onChange={(e) => setValue(e)}
        vertical={true}
        minMaxVisible={true}
      />
      <Typography>Value : {value}</Typography>
    </div>
  );
};

export default VerticalSlider;

Value : 1

Step

값 변경 단위를 설정할 수 있습니다.

Value : 0

minMaxVisible

최소/최대값 표시 여부를 설정할 수 있습니다.

import React, { useState } from 'react';
import { Slider } from 'sud-ui';

const MinMaxVisibleSlider = () => {
  const [value, setValue] = useState(0);

  return (
    <div>
      <Slider 
        value={value} 
        onChange={(e) => setValue(e)} 
        width="80%"
        minMaxVisible={true}
        min={0}
        max={100}
      />
      <div>Value : {value}</div>
    </div>
  );
};

export default MinMaxVisibleSlider;

Size

슬라이더의 크기를 설정할 수 있습니다.

import React, { useState } from 'react';
import { Slider, Radio, Card } from 'sud-ui';

const SizeSlider = () => {
  const [value, setValue] = useState(0);
  const [size, setSize] = useState('md');

  const sizeOptions = [
    { label: 'sm', value: 'sm' },
    { label: 'md', value: 'md' },
    { label: 'lg', value: 'lg' }
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center w-full">
          <Radio.Group
            options={sizeOptions}
            direction="horizontal"
            value={size}
            onChange={setSize}
          />
        </div>
      </Card>
      <Slider
        size={size}
        value={value}
        onChange={(e) => setValue(e)}
      />
    </div>
  );
};

export default SizeSlider;

Fill

슬라이더의 채워진 영역 표시 여부를 설정할 수 있습니다.

Color Customization

슬라이더의 색상을 설정할 수 있습니다.

import React, { useState } from 'react';
import { Slider } from 'sud-ui';

const ColorSlider = () => {
  const [value, setValue] = useState(0);

  return (
    <Slider
      value={value}
      onChange={(e) => setValue(e)}
      trackColor="red-2"
      background="green"
      popupProps={{ background: "black-9", color: "white-9" }}
    />
  );
};

export default ColorSlider;

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

value

슬라이더의 Value

number

onChange

값이 변경될 때 호출되는 함수

(value: number) => void

min

최소값

number

max

최대값

number

100

step

값 변경 단위

number

vertical

수직 방향 슬라이더 여부

boolean

false

disabled

비활성화 여부

boolean

false

size

슬라이더의 크기

width

슬라이더의 너비 (수평 방향일 때)

number | string

height

슬라이더의 높이 (수직 방향일 때)

number | string

minMaxVisible

최소/최대값 표시 여부

boolean

false

colorType

슬라이더의 색상 타입

default

primary

success

warning

danger

info

red

rose

coral

orange

volcano

apricot

yellow

gold

amber

green

lime

mint

blue

sky

cerulean

indigo

cobalt

navy

purple

plum

orchid

forest

sage

warm-gray

cool-gray

neutral

text

ghost

primary

unit

값 뒤에 표시될 단위 (예: %, px 등)

string

background

배경색(palette값 또는 HEX code)

string

trackColor

트랙 색상(palette값 또는 HEX code)

string

fill

채워진 영역 표시 여부

boolean

true

shadow

그림자 크기

none

border

테두리 표시 여부

boolean

true

borderType

테두리 스타일

solid

dashed

dotted

double

groove

ridge

inset

outset

none

solid

borderWeight

테두리 두께

number

borderColor

테두리 색상(palette값 또는 HEX code)

string

thumbSize

썸네일 크기

number

thumbBorder

썸네일 테두리 표시 여부

boolean

true

popupClassName

팝업의 클래스명

string

popupStyle

팝업의 스타일

CSSProperties

{}

popupProps

팝업 속성

PopupBaseProps

{}

고유 ID

string

ariaLabel

접근성 레이블

string

ariaValueText

접근성 값 텍스트

string

className

추가 클래스명

string

style

추가 스타일

CSSProperties

{}

개인정보 처리방침

서비스 약관