Flutter RangeSlider Widget Tutorial

Flutter RangeSlider

Flutter RangeSlider widget is used to select a range from a range of values.

Syntax

The following is a quick code snippet to that defines a RangeSlider widget with different properties set.

RangeSlider(
  values: selectedRange,
  min: 0,
  max: 100,
  onChanged: (RangeValues newRange) {
    setState(() {
      selectedRange = newRange;
    });
  },
  divisions: 100,
  labels: RangeLabels(selectedRange.start.toString(), selectedRange.end.toString()),
),

Simple RangeSlider Widget

In the following example, we create a Flutter Application, with a RangeSlider widget. Only the values, and onChanged properties are set.

onChanged property takes a function. The function receives the current selected range of the slider as argument.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter RangeSlider Tutorial';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  var selectedRange = const RangeValues(0.2, 0.6);

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RangeSlider(
            values: selectedRange,
            onChanged: (RangeValues newRange) {
              setState(() {
                selectedRange = newRange;
              });
            },
          ),
        ]
    );
  }
}

Screenshot

Display RangeSlider Value in Text Widget

This example demonstrates how to use the RangeSlider current selected range value in other widgets, or how to access the RangeSlider value.

We have set the value of a Text widget with the RangeSlider’s current range value.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter RangeSlider Tutorial';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  var selectedRange = const RangeValues(0.2, 0.6);

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RangeSlider(
            values: selectedRange,
            onChanged: (RangeValues newRange) {
              setState(() {
                selectedRange = newRange;
              });
            },
          ),
          Text('$selectedRange'),
        ]
    );
  }
}

Screenshot

RangeSlider with Minimum and Maximum Values

We can set the minimum and maximum values for the RangeSlider widget, for selection, using min and max properties respectively.

In the following example, we have set the min property with 1, and max property with 10. So, the minimum value we can select using the RangeSlider is 0, and the maximum value we can select using the RangeSlider is 10.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter RangeSlider Tutorial';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  var selectedRange = const RangeValues(2, 5);

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RangeSlider(
            values: selectedRange,
            onChanged: (RangeValues newRange) {
              setState(() {
                selectedRange = newRange;
              });
            },
            min: 1,
            max: 10,
          ),
          Text('$selectedRange'),
        ]
    );
  }
}

Screenshot

RangeSlider with Divisions

We can set the RangeSlider to select only discrete values using divisions attribute. This attribute takes an integer value, and makes the specified number of divisions on the slider.

In the following example, we have set the number of divisions to 9.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter RangeSlider Tutorial';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  var selectedRange = const RangeValues(2, 5);

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RangeSlider(
            values: selectedRange,
            onChanged: (RangeValues newRange) {
              setState(() {
                selectedRange = newRange;
              });
            },
            min: 1,
            max: 10,
            divisions: 9,
          ),
          Text('$selectedRange'),
        ]
    );
  }
}

Screenshot

RangeSlider with Labels

Labels can be displayed above both the slider thumbs using labels property, when divisions property is set for the RangeSlider.

In the following example, we have set the labels property with the RangeSlider’s start and end value itself.

Labels are displayed when any of the thumbs are dragged on the slider.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter RangeSlider Tutorial';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  var selectedRange = const RangeValues(2, 5);

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RangeSlider(
            values: selectedRange,
            onChanged: (RangeValues newRange) {
              setState(() {
                selectedRange = newRange;
              });
            },
            min: 1,
            max: 10,
            divisions: 9,
            labels: RangeLabels(selectedRange.start.toString(), selectedRange.end.toString()),
          ),
          Text('$selectedRange'),
        ]
    );
  }
}

Screenshot

Conclusion

In this Flutter Tutorial, we learned about RangeSlider widget, and how to use its attributes to change the behaviour, with examples.