Basic Features in Flutter Slider (SfSlider)

18 Nov 201819 minutes to read

This section explains about how to add the numeric and date range slider.

Minimum

The minimum value that the user can select. The default value of min property is 0.0 and it must be less than the max value.

Maximum

The maximum value that the user can select. The default value of max property is 1.0 and it must be greater than the min value.

Values

It represents the values currently selected in the Flutter Range Slider. The thumbs of the Flutter Range Slider are drawn corresponding to these values.

For date values, the Flutter Range Slider does not have auto interval support. So, it is mandatory to set interval, dateIntervalType, and dateFormat for date values.

Numeric range slider

You can show numeric values in the Flutter Range Slider by setting double values to the min, max and values properties.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(3.0, 7.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider(
      min: 0.0,
      max: 10.0,
      values: _values,
      interval: 2,
      showLabels: true,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Numeric range slider

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(3.0, 7.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider.vertical(
      min: 0.0,
      max: 10.0,
      values: _values,
      interval: 2,
      showLabels: true,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Numeric range slider

Date range slider

You can show date values in the Flutter Range Slider by setting DateTime values to the min, max and values properties.

NOTE

You must import intl package for formatting date range slider using the DateFormat class.

Horizontal

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values =
      SfRangeValues(DateTime(2002, 01, 01), DateTime(2004, 01, 01));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider(
      min: DateTime(2000, 01, 01, 00),
      max: DateTime(2005, 01, 01, 00),
      values: _values,
      interval: 1,
      showLabels: true,
      dateFormat: DateFormat.y(),
      dateIntervalType: DateIntervalType.years,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Date range slider

Vertical

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values =
      SfRangeValues(DateTime(2002, 01, 01), DateTime(2004, 01, 01));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider.vertical(
      min: DateTime(2000, 01, 01, 00),
      max: DateTime(2005, 01, 01, 00),
      values: _values,
      interval: 1,
      showLabels: true,
      dateFormat: DateFormat.y(),
      dateIntervalType: DateIntervalType.years,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Date Range Slider

Handle onChangeStart, onChanged, and onChangeEnd callbacks

onChangeStart

The onChangeStart callback is called when the user begins to interact with the Flutter Range Slider using a tap or drag action. This callback is only used to notify the user that the interaction has started and it does not change the value of the range slider thumb.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 6.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfRangeSlider(
        min: 0.0,
        max: 10.0,
        values: _values,
        onChangeStart: (SfRangeValues startValues) {
          debugPrint('Interaction started');
        },
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    );
  }
}

onChangeEnd

The onChangeEnd callback is called when the user stops interacting with the Flutter Range Slider using a tap or drag action. This callback is only used to notify the user that the interaction has ended and it does not change the value of the range slider thumb.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 6.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfRangeSlider(
        min: 0.0,
        max: 10.0,
        values: _values,
        onChangeEnd: (SfRangeValues endValues) {
          debugPrint('Interaction ended');
        },
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    );
  }
}

onChanged

The onChanged callback is called when the user selects a value through interaction.

NOTE

The Flutter Range Slider passes the new values to the callback but does not change its state until the parent widget rebuilds the Flutter Range Slider with the new values.

NOTE

If it is null, the Flutter Range Slider will be disabled.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(3.0, 7.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider(
      min: 0.0,
      max: 10.0,
      values: _values,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Enabled Range Slider

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(3.0, 7.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider.vertical(
      min: 0.0,
      max: 10.0,
      values: _values,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Enabled range slider

Active color

It represents the color applied to the active track, thumb, overlay, and inactive dividers. The active side of the Flutter Range Slider is between the start and end thumbs.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(3.0, 7.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider(
      min: 0.0,
      max: 10.0,
      values: _values,
      activeColor: Colors.red,
      showDividers: true,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Active color support

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(3.0, 7.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider.vertical(
      min: 0.0,
      max: 10.0,
      values: _values,
      activeColor: Colors.red,
      showDividers: true,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Active color support

Inactive color

It represents the color applied to the inactive track and active dividers.

The inactive side of the Flutter Range Slider is between the min value and the start thumb, and the end thumb and the max value.

For RTL, the inactive side is between the max value and the start thumb, and the end thumb and the min value.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(3.0, 7.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider(
      min: 0.0,
      max: 10.0,
      values: _values,
      activeColor: Colors.red,
      inactiveColor: Colors.red.withValues(alpha: 0.2),
      showDividers: true,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Inactive color support

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(3.0, 7.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider.vertical(
      min: 0.0,
      max: 10.0,
      values: _values,
      activeColor: Colors.red,
      inactiveColor: Colors.red.withValues(alpha: 0.2),
      showDividers: true,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Inactive color support

For customizing individual items