How to Added RangeSlider in Flutter

Flutter recently updated the RangeSlider widgets to the most recent Materials pointers. This article explores the changes to the RangerSlider widgets and uses in your flutter application.

The Flutter RangeSlider widget is written natively in Dart. It is a lightweight and highly interactive UI control that allows users to select a range of values. It has built-in support for both date-time and numeric ranges.

A range slider can be utilized to pick from either a continuous or a discrete set of values. The default is to use a continuous range of values from min to max. To make use of discrete values, use a non-null worth for divisions, which indicates the number of discrete intervals. For example, if min is 0.0 and max is 50.0 and divisions is 5, then the slider can take on the discrete values 0.0, 10.0, 20.0, 30.0, 40.0, and 50.0.

Add Flutter RangeSlider

RangeSlider(
  //by default, min-max: 0-1
  values: RangeValues(startval, endval), 
  onChanged: (RangeValues value) {  
        setState(() {
            startval = value.start;
            endval = value.end;
        });
  }, 
)

By default, the minimum and maximum range will be 0 to 1, so you have to pass the start and end value in between 0 and 1. If you want a greater number of ranges, then you can set your own min and max values like below

double startval1 = 20, endval1 = 70;

RangeSlider(
  min: 0, 
  max: 100,
  divisions: 10, //slide interval
  labels: RangeLabels("Rs. $startval1", "Rs. $endval1"),
  values: RangeValues(startval1, endval1), 
  onChanged: (RangeValues value) {  
        setState(() {
            startval1 = value.start;
            endval1 = value.end;
        });
  }, 
)

Also Read : What are loops in Dart programming?

Flutter RangeSlider Full Example

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  
  double startval = 0, endval = 0.5;
  //iniital value for start range and end range
  double startval1 = 20, endval1 = 70;
  
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("RangeSlider in Flutter"),
            backgroundColor: Colors.redAccent
          ),
          body: Container(
            padding: EdgeInsets.only(top:20, left:20, right:20),
            alignment: Alignment.topLeft,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [ 

                 Text("Start Value: $startval", style:TextStyle(fontSize: 20)), 
                 Text("End Value: $endval", style:TextStyle(fontSize: 20)), 

                 Text("Start Value1: $startval1", style:TextStyle(fontSize: 20)), 
                 Text("End Value1: $endval1", style:TextStyle(fontSize: 20)), 

                  RangeSlider(
                    //by default, min-max: 0-1
                    values: RangeValues(startval, endval), 
                    onChanged: (RangeValues value) {  
                          setState(() {
                              startval = value.start;
                              endval = value.end;
                          });
                    }, 
                  ),

                  Padding(padding: EdgeInsets.all(20)),

                  RangeSlider(
                    min: 0, 
                    max: 100,
                    divisions: 10, //slide interval
                    labels: RangeLabels("Rs. $startval1", "Rs. $endval1"),
                    values: RangeValues(startval1, endval1), 
                    onChanged: (RangeValues value) {  
                          setState(() {
                              startval1 = value.start;
                              endval1 = value.end;
                          });
                    }, 
                  )
            ],)
          )
       );
  }
}

Output