Track in Flutter Range Slider (SfRangeSlider)

18 Nov 201811 minutes to read

This section explains how to customize the track in the Flutter Range Slider.

Track color

You can change the active and inactive track color of the Flutter Range Slider using the activeTrackColor and inactiveTrackColor 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 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 code examples in this section.

Horizontal

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

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

Vertical

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

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

Track height

You can change the track height of the Flutter Range Slider using the activeTrackHeight and the inactiveTrackHeight properties. The default values of the activeTrackHeight and the inactiveTrackHeight properties are 6.0 and 4.0.

Horizontal

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        activeTrackHeight: 8,
        inactiveTrackHeight: 8,
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Vertical

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

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

Track corner radius

You can change the corner of the track to be round in the Flutter Range Slider using the trackCornerRadius property. The default value of the trackCornerRadius property is 1.0.

Horizontal

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        activeTrackHeight: 10,
        inactiveTrackHeight: 10,
        trackCornerRadius: 5,
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Vertical

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        activeTrackHeight: 10,
        inactiveTrackHeight: 10,
        trackCornerRadius: 5,
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}