Ticks in Flutter Range Slider (SfRangeSlider)

6 Aug 202623 minutes to read

This section explains how to add major and minor ticks in the range slider.

Show major ticks

You can enable the major ticks on the track. It is a shape which is used to mark the major interval points on the track. The default value of showTicks property is false.

For example, if min is 0.0 and max is 10.0 and interval is 2.0, the range slider will render the major ticks at 0.0, 2.0, 4.0 and so on.

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(4.0, 6.0);

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

Range slider tick 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(4.0, 6.0);

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

Range slider tick support

NOTE

Refer the tickShape and SfRangeSliderThemeData for customizing the major tick’s visual appearance.

Show minor ticks

It is used to represent the number of smaller ticks between two major ticks. For example, if min is 0.0 and max is 10.0 and interval is 2.0, the range slider will render the major ticks at 0.0, 2.0, 4.0 and so on. If minorTicksPerInterval is 1, then smaller ticks will be rendered on 1.0 and 3.0 and so on.

IMPORTANT

The default value of minorTicksPerInterval property is null. When null, no minor ticks are rendered. To render minor ticks, set this property to a value greater than 0.

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(4.0, 6.0);

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

Range slider minor tick 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(4.0, 6.0);

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

Range slider minor tick support

NOTE

Major ticks color

You can change the active and inactive major ticks color of the range slider using the activeTickColor and inactiveTickColor properties respectively.

The active side of the range slider is between the start and end thumbs.

The inactive side of the 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.

NOTE

You must import the theme.dart library from the Core package to use SfRangeSliderTheme. This applies to all the remaining code examples in this section that use SfRangeSliderThemeData.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.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, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        activeTickColor: Colors.red,
        inactiveTickColor: Colors.red[100],
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        values: _values,
        interval: 1,
        showTicks: true,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Major ticks color

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.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, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        activeTickColor: Colors.red,
        inactiveTickColor: Colors.red[100],
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        values: _values,
        interval: 1,
        showTicks: true,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Major ticks color

Minor ticks color

You can change the active and inactive minor ticks color of the range slider using the activeMinorTickColor and inactiveMinorTickColor properties respectively.

The active side of the range slider is between the start and end thumbs.

The inactive side of the 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_core/theme.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, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        activeMinorTickColor: Colors.red,
        inactiveMinorTickColor: Colors.red[200],
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        values: _values,
        interval: 2,
        minorTicksPerInterval: 1,
        showTicks: true,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Minor ticks color

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.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, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        activeMinorTickColor: Colors.red,
        inactiveMinorTickColor: Colors.red[200],
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        values: _values,
        interval: 2,
        minorTicksPerInterval: 1,
        showTicks: true,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Minor ticks color

Tick size

You can change the major and minor ticks size of the range slider using the tickSize and minorTickSize properties respectively.

Horizontal

The default value of the tickSize property is Size(1.0, 8.0) and minorTickSize property is Size(1.0, 5.0).

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.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, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        tickSize: const Size(3.0, 12.0),
        minorTickSize: const Size(3.0, 8.0),
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 2,
        minorTicksPerInterval: 1,
        showTicks: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Ticks size support

Vertical

The default value of the tickSize property is Size(8.0, 1.0) and minorTickSize property is Size(5.0, 1.0).

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.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, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        tickSize: const Size(12.0, 3.0),
        minorTickSize: const Size(8.0, 3.0),
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 2,
        minorTicksPerInterval: 1,
        showTicks: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Ticks size support

Ticks offset

You can adjust the space between the track and ticks of the range slider using the tickOffset property in the SfRangeSliderThemeData. The default value of the tickOffset property is null.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.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, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        tickOffset: const Offset(0.0, 10.0),
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 2,
        minorTicksPerInterval: 1,
        showTicks: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Ticks offset support

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.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, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        tickOffset: const Offset(10.0, 0.0),
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 2,
        minorTicksPerInterval: 1,
        showTicks: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Ticks offset support