Flutter - Slider and RangeSlide - GeeksforGeeks

26 Nov, 2021
A slider is a widget to select a value from a given range in the application. We can slide through the value and select the desired value from it. We don’t need to install any dependency to implement a slider.
A Range Slider is very similar to a Slider widget but instead of selecting a single value, we can select a continuous range of value from a given range. 
The slider widget can be implemented by simply using the slider widget and providing the range values. This widget takes two required parameters:
value: Here we need to pass the default value whenever the app is launched and should be of type double.onChanged: This function is triggered whenever the slider value is changed are changed and we get a double value which we can use for further process.
value: Here we need to pass the default value whenever the app is launched and should be of type double.
onChanged: This function is triggered whenever the slider value is changed are changed and we get a double value which we can use for further process.
Here is the syntax for Slider.
Dart
Slider(  value: value,  onChanged: (value) {      },),
RangeSlider widget is implemented by using the widget called RangeSlider. This widget takes two required parameters:
values: Here we need to pass the RangeValues type of data which has a start and an end.onChanged: This function is triggered whenever the range values are changed and we get a RangeValue value.
values: Here we need to pass the RangeValues type of data which has a start and an end.
onChanged: This function is triggered whenever the range values are changed and we get a RangeValue value.
Dart
RangeSlider(  values: RangeValues(start, end),  onChanged: (value) {},)
Example 1: Slider Widget
Here we have created an age selector slider. The user can slide the slider and select a value.
Dart
import 'package:flutter/material.dart';  class SliderTutorial extends StatefulWidget {  const SliderTutorial({Key? key, required this.title}) : super(key: key);  final String title;  @override  _SliderTutorialState createState() => _SliderTutorialState();}  class _SliderTutorialState extends State<SliderTutorial> {  int age = 10;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text(widget.title),      ),      body: Column(        mainAxisAlignment: MainAxisAlignment.spaceEvenly,        children: [          Slider(            label: "Select Age",            value: age.toDouble(),            onChanged: (value) {              setState(() {                age = value.toInt();              });            },            min: 5,            max: 100,          ),          Text(            "Your Age: " + age.toString(),            style: const TextStyle(              fontSize: 32.0,            ),          ),        ],      ),    );  }}
Output:
Example 2: RangeSlider Widget
In this example, we will implement the RangeSlider widget. We will need to create two double values, start and end respectively to implement the RangeSlider. Here is the code.
Dart
import 'package:flutter/material.dart';  class RangeSliderTutorial extends StatefulWidget {  const RangeSliderTutorial({Key? key, required this.title}) : super(key: key);  final String title;  @override  _RangeSliderTutorialState createState() => _RangeSliderTutorialState();}  class _RangeSliderTutorialState extends State<RangeSliderTutorial> {  double start = 30.0;  double end = 50.0;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text(widget.title),      ),      body: Column(        mainAxisAlignment: MainAxisAlignment.spaceEvenly,        children: [          RangeSlider(            values: RangeValues(start, end),            labels: RangeLabels(start.toString(), end.toString()),            onChanged: (value) {              setState(() {                start = value.start;                end = value.end;              });            },            min: 10.0,            max: 80.0,          ),          Text(            "Start: " +                start.toStringAsFixed(2) +                "\nEnd: " +                end.toStringAsFixed(2),            style: const TextStyle(              fontSize: 32.0,            ),          ),        ],      ),    );  }}
Output:
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Dialogs
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Dialogs