個人開発者が勉強がてらまとめているだけのサイトです

範囲スライダー Range Slider

つまみが2つあるスライダー。下限と上限を動かして「〇〇円から〇〇円まで」のような範囲を決める。

別名
範囲スライダー価格帯の絞り込み上限と下限2つのつまみダブルスライダーRangeSlider
動き
つまみが2つ間の色が伸び縮み
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の 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

似ているもの・一緒に見たいもの

触ってみる ↗
入力・フォーム スライダーSlider

つまみを横へドラッグして値を決める。目盛りを付けると決まった刻みに吸い付き、動かしている間だけ上に値が出る。

つまみを横へドラッグ
触ってみる ↗
ボタン チップChips

小さな角丸のボタン。絞り込み・並び替えの選択、入力したタグの表示、すぐ実行できる提案などに使う。

押すと選択