# Ticks in Flutter Range Slider (SfRangeSlider)

This section explains how to add major and minor ticks in the Flutter 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`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/showTicks.html) property is `false`.

For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) is 0.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/interval.html) is 2.0, the Flutter Range Slider will render the major ticks at 0.0, 2.0, 4.0 and so on.

### Horizontal

{% tabs %}
{% highlight Dart %}

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;
        });
      },
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Range Slider tick support](images/tick/major-tick.png)

### Vertical

{% tabs %}
{% highlight Dart %}

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;
        });
      },
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Range slider tick support](images/tick/vertical-major-tick.png)

N> Refer the [`tickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/tickShape.html) and [`SfRangeSliderThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData-class.html) 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`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) is 0.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/interval.html) is 2.0, the Flutter Range Slider will render the major ticks at 0.0, 2.0, 4.0 and so on. If [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/minorTicksPerInterval.html) is 1, then smaller ticks will be rendered on 1.0 and 3.0 and so on.

I> The default value of [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/minorTicksPerInterval.html) property is `null`. When `null`, no minor ticks are rendered. To render minor ticks, set this property to a value greater than `0`.

### Horizontal

{% tabs %}
{% highlight Dart %}

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;
        });
      },
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Range Slider minor tick support](images/tick/minor-tick.png)

### Vertical

{% tabs %}
{% highlight Dart %}

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;
        });
      },
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Range slider minor tick support](images/tick/vertical-minor-tick.png)

N>
* Refer the [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/showTicks.html) to know about the rendering major ticks at given interval.
* Refer the [`minorTickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/minorTickShape.html) and [`SfRangeSliderThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData-class.html) for customizing the minor tick's visual appearance.

## Major ticks color

You can change the active and inactive major ticks color of the Flutter Range Slider using the [`activeTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeTickColor.html) and [`inactiveTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveTickColor.html) properties respectively.

The active side of the Flutter Range Slider is between the start and end thumbs.

The inactive side of the Flutter Range Slider is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value and the start thumb, and the end thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value.

For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value and the start thumb, and the end thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value.

N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). This applies to all the remaining code examples in this section that use `SfRangeSliderThemeData`.

### Horizontal

{% tabs %}
{% highlight Dart %}

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;
          });
        },
      ),
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Major ticks color](images/tick/slider-major-ticks.png)

### Vertical

{% tabs %}
{% highlight Dart %}

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;
          });
        },
      ),
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Major ticks color](images/tick/vertical-slider-major-ticks.png)

## Minor ticks color

You can change the active and inactive minor ticks color of the Flutter Range Slider using the [`activeMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeMinorTickColor.html) and [`inactiveMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveMinorTickColor.html) properties respectively.

The active side of the Flutter Range Slider is between the start and end thumbs.

The inactive side of the Flutter Range Slider is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value and the start thumb, and the end thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value.

For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value and the start thumb, and the end thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value.

### Horizontal

{% tabs %}
{% highlight Dart %}

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;
          });
        },
      ),
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Minor ticks color](images/tick/slider-minor-ticks.png)

### Vertical

{% tabs %}
{% highlight Dart %}

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;
          });
        },
      ),
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Minor ticks color](images/tick/vertical-slider-minor-ticks.png)

## Tick size

You can change the major and minor ticks size of the Flutter Range Slider using the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickSize.html) and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/minorTickSize.html) properties respectively.

### Horizontal

The default value of the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickSize.html) property is `Size(1.0, 8.0)` and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/minorTickSize.html) property is `Size(1.0, 5.0)`.

{% tabs %}
{% highlight Dart %}

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;
          });
        },
      ),
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Ticks size support](images/tick/slider-ticks-size.png)

### Vertical

The default value of the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickSize.html) property is `Size(8.0, 1.0)` and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/minorTickSize.html) property is `Size(5.0, 1.0)`.

{% tabs %}
{% highlight Dart %}

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;
          });
        },
      ),
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Ticks size support](images/tick/vertical-slider-ticks-size.png)

## Ticks offset

You can adjust the space between the track and ticks of the range slider using the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickOffset.html) property in the [`SfRangeSliderThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData-class.html). The default value of the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickOffset.html) property is `null`.

### Horizontal

{% tabs %}
{% highlight Dart %}

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;
          });
        },
      ),
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Ticks offset support](images/tick/slider-ticks-offset.png)

### Vertical

{% tabs %}
{% highlight Dart %}

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;
          });
        },
      ),
    ))));
  }
}

{% endhighlight %}
{% endtabs %}

![Ticks offset support](images/tick/vertical-slider-ticks-offset.png)