How to Add Value Slider in Flutter

In this example, we are going to show you how to add a value slider with minimum and maximum values in Flutter. Slider is mostly used for components like volume level, or any kind of numerical value configurations. See the example below:

double sval = 0;
//initial value

Slider(
    value: sval,
    onChanged: (double value) {  
    //by default value will be range from 0-1
        setState(() {
            sval = value;
        });
    },
)

Here, the range will from 0-1, which means, you will get the decimal value that exists between 0 and 1.

double sval1 = 0;

Slider(
    min: 0, //add min and max
    max: 100,
    value: sval1,
    onChanged: (double value) {  
        setState(() {
            sval1 = value;
        });
    },
)

You have to pass min and max values on Slider() widget.

double sval2 = 0;

Slider(
    min: 0, //add min and max
    max: 100,
    divisions:  5,
    value: sval2,
    onChanged: (double value) {  
        setState(() {
            sval2 = value;
        });
    },
)

You have to pass divisions to set slider intervals on Slider widget.

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 sval = 0, sval1 = 0, sval2 = 0;
  //value for slider 
  
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Slider 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("Slider Value:" + sval.toStringAsFixed(3), 
                      style: TextStyle(fontSize: 20),),

                  Text("Slider Value 1:" + sval1.toStringAsFixed(3), 
                      style: TextStyle(fontSize: 20),),

                  Text("Slider Value 2:" + sval2.toStringAsFixed(3), 
                      style: TextStyle(fontSize: 20),),
                
                  Slider(
                      value: sval,
                      onChanged: (double value) {  
                      //by default value will be range from 0-1
                          setState(() {
                              sval = value;
                          });
                      },
                  ),


                  Slider(
                      min: 0, //add min and max
                      max: 100,
                      value: sval1,
                      onChanged: (double value) {  
                          setState(() {
                              sval1 = value;
                          });
                      },
                  ),

                  Slider(
                      min: 0, //add min and max
                      max: 100,
                      divisions:  5,
                      value: sval2,
                      onChanged: (double value) {  
                          setState(() {
                              sval2 = value;
                          });
                      },
                  )
            ],)
          )
       );
  }
}