範囲スライダー Range Slider
つまみが2つあるスライダー。下限と上限を動かして「〇〇円から〇〇円まで」のような範囲を決める。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
どんなもの?
RangeSlider に values(RangeValues(下限, 上限))と onChanged を渡します。
ネットショップの価格帯や、日時・年齢の絞り込みでよく使われます。
divisions で刻みを付け、labels(RangeLabels)を渡すとドラッグ中に2つの値の吹き出しが出ます。
つまみだけでは正確な値が分からないので、スライダーの上に「¥3,000 〜 ¥12,000」のように文字でも出すと親切です。
こんなときに
- 価格・距離・年齢など、上限と下限の両方で絞り込む
避けたい場面
- 片側だけ決めればよい(普通のスライダーにする)
最小コード
RangeSlider(
values: price,
min: 0,
max: 20000,
divisions: 20,
labels: RangeLabels('¥${price.start.round()}', '¥${price.end.round()}'),
onChanged: (v) => setState(() => price = v),
)使うウィジェット
RangeSliderRangeValuesRangeLabels