# Slider URL: /components/slider Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/slider.mdx 지정된 범위 내에서 하나 또는 두 개의 값을 선택해 입력할 수 있는 컴포넌트입니다. Slider를 Field 내부에서 사용하여 Slider Field로 활용할 수 있습니다. ## Anatomy ![Slider의 Anatomy 이미지. Value Indicator (Optional), Handle, Track (Active, Inactive), Steps, Marker로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/cefee653-8ed9-42b6-9d3b-693e5994d6a8) ![Slider의 Anatomy 이미지 (Active 상태에서 Value Indicator가 표시된 예시)](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/eeb2cc0a-a228-4b92-a75b-7a34540a05a5) Slider는 Track(Active, Inactive), Handle, Steps, Marker로 이뤄져있습니다. ## Properties ### Value ![Slider의 Value Property - Single, Range](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7367f0fa-5755-409f-8d38-4fed0d52bc06) Slider는 선택하는 Value에 따라 핸들 개수가 바뀝니다. | Value 타입 | 설명 | | ---------- | ------------------- | | **Single** | 하나의 값을 선택할 수 있습니다. | | **Range** | 두 개의 값을 선택할 수 있습니다. | ### State ![Slider의 State - Enabled, Active, Disabled](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a754cfb1-c503-476d-a255-b35a928993d4) | State | 설명 | | ------------ | ------------------------------------------------------ | | **Enabled** | Slider가 작동할 준비가 된 표준 상태입니다. | | **Active** | 사용자가 핸들(Handle)을 현재 클릭(터치)하고 있거나 드래그하는 바로 그 순간을 의미합니다. | | **Disabled** | Slider가 화면에 보이지만 상호작용이 완전히 불가능한 상태입니다. | ### Tick Mark property Tick Mark는 사용성에 따라 두 모드 중 하나를 사용할 수 있습니다. ![Slider의 Tick Mark property - Continuous Mode, Discrete Mode](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/1099c28a-23de-49f2-a93d-a4af955e1bf0) #### 연속형(Continuous) 모드: '시각적 가이드'를 위한 Tick Mark 연속형 모드에서는 사용자가 값의 위치를 쉽게 파악할 수 있도록 참조점(Reference point)으로 틱 마크를 제공할 수 있습니다. #### 이산형(Discrete) 모드: '스냅(Snap)'을 위한 Tick Mark 이산형 모드에서 틱 마크는 사용자가 선택할 수 있는 유일한 값(Step)을 의미합니다. 이를 시각적으로 보여줄 수 있도록, 연속적인 모드보다 훨씬 더 큰 Tick Mark를 가지고 있습니다. ![Slider의 Tick Mark property - Step의 개수](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6df24ecc-1421-4ebe-9767-9086ff973d0c) Tick Mark는 총 2~5개의 스텝을 표현할 수 있습니다. ### Markers Property ![Slider의 Markers Property 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f865a202-4f31-4570-9d9d-12b88bfb3010) Markers는 Tick Mark의 정보를 전달합니다. step에 맞게 count를 설정할 수 있으며, 최솟값과 최댓값만 표시하는 경우 count 2로 표현합니다. ### Active Track ![Slider의 Active Track - Show, Hide](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/60cb2f53-7bd4-47ee-b8a4-1db138b4521d) 핸들이 시작점부터 현재 위치까지 지나온 경로를 보여주는 활성 트랙(Active Track)은 사용자의 선택에 따라 표시(Show)하거나 숨길(Hide) 수 있습니다. 기본적으로 선택된 값의 크기나 진행 정도를 시각적으로 명확하게 전달할 수 있도록 Active Track이 보여집니다. 특정한 값 자체를 선택하는 것이 중요할 때 Active Track을 숨겨 선택된 값을 강조할 수 있습니다. ## Guidelines ### Slider touch target ![Slider touch target 예시 - Handle과 Track](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/1dca69f5-4668-4acc-bfaf-df50cd19b0da) | Touch Target | 설명 | | -------------- | --------------------------------------------------------------------- | | **Handle(핸들)** | 가장 기본이 되는 터치 대상입니다. 사용자가 값을 미세하게 조절하기 위해 누르고 드래그(Drag)하는 주된 컨트롤러입니다. | | **Track(트랙)** | 핸들이 움직이는 경로인 트랙 전체 또한 터치 대상입니다. 트랙을 터치하는 경우 Tap jump로 터치한 영역으로 이동됩니다. | ### Drag ![Slider Drag 동작 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9ee2cfe6-60fb-4410-902b-211e2a5f2b19) Slider에서 다양한 행동으로 값을 선택할 수 있습니다. 기본적으로 Handle을 드래그해서 값을 선택할 수 있습니다. ### Tap jump ![Slider Tap jump 동작 예시 - Continuous Mode](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/48292d60-ae33-4c09-a1c3-b1c589910954) ![Slider Tap jump 동작 예시 - Discrete Mode](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e87abd3b-f67e-4fdb-a2f3-58706e74f556) 트랙의 원하는 지점을 탭하면, 핸들이 해당 위치로 바로 이동하며 값이 선택됩니다. | 모드 | 동작 | | ---------------- | ---------------------------------------------------------------- | | **연속적인 경우** | 0부터 100까지의 Slider에서 사용자가 트랙의 73% 지점을 클릭하면, 썸은 정확히 73의 값으로 이동합니다. | | **움직임이 제한적인 경우** | 클릭한 위치에서 가장 가까운 단계(Step)로 자동 보정(반올림)되어 '스냅'됩니다. | ### 상황에 맞게 단계 제공하기 ![상황에 맞게 단계 제공하기 - Continuous Mode](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c45d2f34-0d80-4189-b19e-49b1929ad825) ![상황에 맞게 단계 제공하기 - Discrete Mode](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b8b827d5-cad4-4de5-ac14-095f085d1a2e) Slider는 기본적으로 연속적인(Continuous) 값을 다루지만, 사용자가 선택해야 하는 값의 성격에 따라, 의도적으로 움직임을 제한하는(Discrete) 단계를 제공할지 결정해야 합니다. | 모드 | 설명 | 사용 예시 | | ---------------- | ------------------------------------------ | ------------------------------------ | | **연속적인 경우** | 트랙 위를 부드럽게 움직이는 표준 Slider입니다. | 볼륨, 밝기 등 주관적이고 연속적인 값 | | **움직임이 제한적인 경우** | 정해진 단위로만 증가/감소하며, 정해진 단계 외의 값을 선택할 수 없습니다. | 별점(1~5), 수량(10, 20, 30), 할인율(5% 단위) | ### 합리적인 기본값을 제공하기 ![합리적인 기본값 제공 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0988cffb-2b7f-4fc3-9f35-18219548e34a) '합리적인 기본값(Reasonable Default)'은 사용자가 페이지에 진입하거나 컴포넌트를 처음 마주했을 때, 미리 설정되어 있는 Slider의 초기값을 의미합니다. 이 값은 사용자의 추가 조작 없이도 가장 안전하거나, 가장 일반적이거나, 가장 권장되는 상태를 제공하여 사용자의 수고를 덜고 실수를 방지하는 데 목적이 있습니다. ### 현재 값을 명확히 표시하기 ![현재 값을 명확히 표시하기 - Value indicator 활용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/cd669599-00ad-4384-a9a5-924db50d754e) 현재 값을 명확히 표시하는 것은 의도한 대로 시스템이 작동하고 있음을 인지하는 데 중요하기에 Active시 현재의 값을 보여주는 Value indicator를 활용하는 것이 좋습니다. ### Value Indicator 오버플로우 방지하기 ![Value Indicator 오버플로우 방지 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0628fe61-5dc3-4742-b5e1-c321ee1702f1) Thumb이 트랙 양 끝에 도달하면, Value Indicator가 영역을 벗어나지 않도록 안쪽으로 위치를 보정합니다. ## Specification ### Slider Component spec (JSON): /rootage/components/slider.json ### Slider Tick Component spec (JSON): /rootage/components/slider-tick.json ### Slider Thumb Component spec (JSON): /rootage/components/slider-thumb.json