Interval in Flutter Slider (SfSlider)

18 Nov 201821 minutes to read

This section explains how to set the interval for numeric and date sliders.

Numeric interval

Flutter Slider elements like labels, ticks and dividers are rendered based on the interval, min and max properties. The default value is null and it must be greater than 0.

For example, if min is 0.0 and max is 10.0 and interval is 2.0, the Flutter Slider will render the labels, major ticks, and dividers at 0.0, 2.0, 4.0 and so on.

Horizontal

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

class NumericIntervalPage extends StatefulWidget {
  @override
  _NumericIntervalPageState createState() => _NumericIntervalPageState();
}

class _NumericIntervalPageState extends State<NumericIntervalPage> {
  double _value = 4.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child: SfSlider(
                min: 0.0,
                max: 10.0,
                interval: 2,
                showTicks: true,
                showLabels: true,
                value: _value,
                onChanged: (double newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              ),
            )
        )
    );
  }
}

Numeric interval support

Vertical

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

class VerticalNumericIntervalPage extends StatefulWidget {
  @override
  _VerticalNumericIntervalPageState createState() => _VerticalNumericIntervalPageState();
}

class _VerticalNumericIntervalPageState extends State<VerticalNumericIntervalPage> {
  double _value = 4.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child: SfSlider.vertical(
                min: 0.0,
                max: 10.0,
                interval: 2,
                showTicks: true,
                showLabels: true,
                value: _value,
                onChanged: (double newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              ),
            )
        )
    );
  }
}

Numeric interval support

NOTE

  • Refer the showDividers to know about the rendering of dividers at given interval.
  • Refer the showTicks to know about the rendering of major ticks at given interval.
  • Refer the showLabels to know about the rendering of labels at given interval.

Date interval

The type of date interval. It can be years to seconds. It is mandatory for date SfSlider. The default value of dateIntervalType property is null.

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

For example, if min is DateTime(2000, 01, 01) and max is DateTime(2005, 01, 01) and interval is 1, dateIntervalType is DateIntervalType.years, dateFormat is DateFormat.y() then the Flutter Slider will render the labels, major ticks, and dividers at 2000, 2001, 2002 and so on.

NOTE

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

Horizontal

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

class DateIntervalPage extends StatefulWidget {
  @override
  _DateIntervalPageState createState() => _DateIntervalPageState();
}

class _DateIntervalPageState extends State<DateIntervalPage> {
  DateTime _value = DateTime(2002, 01, 01);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child:  SfSlider(
                min: DateTime(2000, 01, 01, 00),
                max: DateTime(2004, 12, 31, 24),
                value: _value,
                interval: 1,
                showLabels: true,
                showTicks: true,
                dateFormat: DateFormat.y(),
                dateIntervalType: DateIntervalType.years,
                onChanged: (DateTime newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              ),
            )
        )
    );
  }
}

Date interval type support

Vertical

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

class VerticalDateIntervalPage extends StatefulWidget {
  @override
  _VerticalDateIntervalPageState createState() => _VerticalDateIntervalPageState();
}

class _VerticalDateIntervalPageState extends State<VerticalDateIntervalPage> {
  DateTime _value = DateTime(2002, 01, 01);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child:  SfSlider.vertical(
                min: DateTime(2000, 01, 01, 00),
                max: DateTime(2004, 12, 31, 24),
                value: _value,
                interval: 1,
                showLabels: true,
                showTicks: true,
                dateFormat: DateFormat.y(),
                dateIntervalType: DateIntervalType.years,
                onChanged: (DateTime newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              ),
            )
        )
    );
  }
}

Date interval type support

Discrete selection for numeric values

You can move the thumb in discrete manner for numeric values using the stepSize property in the Flutter Slider.

Horizontal

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

class StepSizePage extends StatefulWidget {
  @override
  _StepSizePageState createState() => _StepSizePageState();
}

class _StepSizePageState extends State<StepSizePage> {
  double _value = 4.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child: SfSlider(
                min: 0.0,
                max: 10.0,
                interval: 2,
                stepSize: 2,
                showTicks: true,
                minorTicksPerInterval: 1,
                showLabels: true,
                value: _value,
                onChanged: (double newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              ),
            )
        )
    );
  }
}

Step size support

Vertical

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

class VerticalStepSizePage extends StatefulWidget {
  @override
  _VerticalStepSizePageState createState() => _VerticalStepSizePageState();
}

class _VerticalStepSizePageState extends State<VerticalStepSizePage> {
  double _value = 4.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child: SfSlider.vertical(
                min: 0.0,
                max: 10.0,
                interval: 2,
                stepSize: 2,
                showTicks: true,
                minorTicksPerInterval: 1,
                showLabels: true,
                value: _value,
                onChanged: (double newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              ),
            )
        )
    );
  }
}

Discrete selection for date values

You can move the thumb in discrete manner for date values using the stepDuration property in the Flutter Slider.

NOTE

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

For example, if min is DateTime(2015, 01, 01) and max is DateTime(2020, 01, 01) and stepDuration is SliderStepDuration(years: 1, months: 6), the slider will move the thumb at DateTime(2015, 01, 01), DateTime(2016, 07, 01), DateTime(2018, 01, 01), and DateTime(2019, 07, 01).

Horizontal

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

class StepDurationPage extends StatefulWidget {
  @override
  _StepDurationPageState createState() => _StepDurationPageState();
}

class _StepDurationPageState extends State<StepDurationPage> {
  DateTime _value = DateTime(2004, 01, 01);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child: SfSlider(
                min: DateTime(2000, 01, 01),
                max: DateTime(2010, 01, 01),
                interval: 2,
                stepDuration: SliderStepDuration(years: 2),
                dateFormat: DateFormat.y(),
                dateIntervalType: DateIntervalType.years,
                showTicks: true,
                showLabels: true,
                value: _value,
                onChanged: (DateTime newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              ),
            )
        )
    );
  }
}

Step duration support

Vertical

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

class VerticalStepDurationPage extends StatefulWidget {
  @override
  _VerticalStepDurationPageState createState() => _VerticalStepDurationPageState();
}

class _VerticalStepDurationPageState extends State<VerticalStepDurationPage> {
  DateTime _value = DateTime(2004, 01, 01);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child: SfSlider.vertical(
                min: DateTime(2000, 01, 01),
                max: DateTime(2010, 01, 01),
                interval: 2,
                stepDuration: SliderStepDuration(years: 2),
                dateFormat: DateFormat.y(),
                dateIntervalType: DateIntervalType.years,
                showTicks: true,
                showLabels: true,
                value: _value,
                onChanged: (DateTime newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              ),
            )
        )
    );
  }
}