Range#

두 개의 핸들로 [minValue, maxValue] 구간을 선택하는 듀얼 핸들 슬라이더입니다. 단일 값을 선택하는 Slider와 달리, 가격대·날짜 범위·필터 구간 같은 범위 선택에 사용합니다.

Live Preview#

class RangeDefaultExample extends StatefulComponent {
  const RangeDefaultExample({super.key});

  @override
  State<RangeDefaultExample> createState() => _RangeDefaultExampleState();
}

class _RangeDefaultExampleState extends State<RangeDefaultExample> {
  double _min = 20;
  double _max = 80;

  @override
  Component build(BuildContext context) {
    return Range(
      minValue: _min,
      maxValue: _max,
      onChanged: (min, max) => setState(() {
        _min = min;
        _max = max;
      }),
    );
  }
}

class RangeDefaultExample extends StatefulWidget {
  const RangeDefaultExample({super.key});

  @override
  State<RangeDefaultExample> createState() => _RangeDefaultExampleState();
}

class _RangeDefaultExampleState extends State<RangeDefaultExample> {
  double _min = 20;
  double _max = 80;

  @override
  Widget build(BuildContext context) {
    return Range(
      minValue: _min,
      maxValue: _max,
      onChanged: (min, max) => setState(() {
        _min = min;
        _max = max;
      }),
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

• 최소/최대 두 값으로 구간을 선택받는 경우 (가격대 필터 등)
• 핸들 사이 구간을 시각적으로 강조해야 하는 경우

대신 다른 컴포넌트를 사용하세요:

• Slider: 단일 값을 선택하는 경우

기본 사용법 (Basic Usage)#

// 기본 범위 슬라이더
Range(
  minValue: minVal,
  maxValue: maxVal,
  onChanged: (min, max) => setState(() {
    minVal = min;
    maxVal = max;
  }),
)

// 구간 / 분할 조정
Range(
  minValue: 25,
  maxValue: 75,
  min: 0,
  max: 200,
  divisions: 20,
  onChanged: (min, max) => updateRange(min, max),
)

// 기본 범위 슬라이더
Range(
  minValue: minVal,
  maxValue: maxVal,
  onChanged: (min, max) => setState(() {
    minVal = min;
    maxVal = max;
  }),
)

// 구간 / 분할 조정
Range(
  minValue: 25,
  maxValue: 75,
  min: 0,
  max: 200,
  divisions: 20,
  onChanged: (min, max) => updateRange(min, max),
)

Props / Parameters#

동작 스펙 (Behavior)#

인터랙션#

• 드래그: 드래그 시작 지점에서 가까운 핸들이 선택되어 이동
• 탭: 탭한 위치에서 가까운 핸들이 그 지점으로 이동
• 핸들끼리 교차하지 않도록 minValue ≤ maxValue 가 항상 유지됨
• enabled가 false이거나 onChanged가 null이면 비활성

접근성 (Accessibility)#

• 트랙: role="slider" + aria-valuemin / aria-valuemax / aria-valuenow
• 비활성 시 aria-disabled="true"

크로스 플랫폼 차이점 (Platform Differences)#

관련 컴포넌트 (Related Components)#

• Slider: 단일 값 선택 슬라이더