Slider

범위 내 값을 선택하는 슬라이더 컴포넌트

Slider#

연속적인 값 또는 범위를 선택할 수 있는 슬라이더 컴포넌트입니다.

사용법#

// 기본 슬라이더
CouiSlider(
  value: volume,
  onChanged: handleVolumeChange,
  min: 0,
  max: 100,
)

// 범위 슬라이더
CouiRangeSlider(
  values: RangeValues(minPrice, maxPrice),
  onChanged: handlePriceRange,
  min: 0,
  max: 1000000,
)

// 단계 지정
CouiSlider(
  value: rating,
  onChanged: handleRatingChange,
  min: 0,
  max: 5,
  divisions: 5,
)

Slider(
  value: volume,
  onChange: handleVolumeChange,
  min: 0,
  max: 100,
)

RangeSlider(
  values: RangeValues(minPrice, maxPrice),
  onChange: handlePriceRange,
  min: 0,
  max: 1000000,
)

Props / Parameters#

속성	타입	기본값	설명
`value`	`double`	필수	현재 값
`onChanged`	`ValueChanged<double>?`	`null`	값 변경 콜백
`min`	`double`	`0.0`	최솟값
`max`	`double`	`1.0`	최댓값
`divisions`	`int?`	`null`	단계 수
`label`	`String?`	`null`	현재 값 라벨

변형 (Variants)#

라벨 표시#

CouiSlider(
  value: temperature,
  onChanged: handleTempChange,
  min: 16,
  max: 30,
  divisions: 14,
  label: '${temperature.round()}°C',
)

범위 슬라이더#

CouiRangeSlider(
  values: RangeValues(startAge, endAge),
  onChanged: handleAgeRange,
  min: 18,
  max: 65,
  divisions: 47,
)