두 핸들로 구간을 정하는 듀얼 레인지 슬라이더

제작 과정

한 줄 요약

하나의 트랙 위에서 두 핸들을 끌어 최소값과 최대값을 동시에 정하는, 가격필터용 범위 슬라이더입니다.

이럴 때 필요해요

"3만원~12만원"처럼 하한과 상한을 함께 고르는 입력은 숫자 두 개를 따로 받는 것보다 슬라이더 하나가 직관적입니다. 쇼핑몰 가격 필터, 평점연식거리 범위처럼 구간을 좁혀가는 탐색에 잘 맞습니다.

어떻게 동작하나

각 핸들의 위치를 값으로 환산하고, 포인터를 끌면 트랙 기준 비율로 값을 다시 계산합니다.
두 핸들이 서로를 넘지 못하도록 한 칸(step) 간격을 두고 클램프합니다.
두 값 사이 구간을 색으로 채워 선택 범위를 시각화합니다.

놓치기 쉬운 것

핸들 교차를 막지 않으면 min이 max보다 커지는 잘못된 상태가 생깁니다.
각 핸들에 role=slider와 aria-valuemin/now/maxvaluetext를 줘야 스크린리더가 범위를 읽습니다.
마우스뿐 아니라 화살표 키로도 미세 조정할 수 있어야 합니다.

이런 곳에 써요

가격평점연식 등 범위 필터
날짜/시간 구간 선택, 차트 구간 확대

import type { Metadata } from "next"; import { DualRangeDemo } from "./-components/DualRangeDemo"; export const metadata: Metadata = { title: "듀얼 레인지 슬라이더 (데모)", description: "한 트랙에 두 핸들로 최소~최대 구간을 지정하는 레인지 슬라이더. Pointer 드래그 + 교차 방지 + 키보드 + ARIA slider. 가격·필터 범위에 표준.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-violet-50/40"> <DualRangeDemo /> </main> ); }