Track in Flutter Slider (SfSlider)

26 Apr 202114 minutes to read

This section helps to learn about how to customize the track in the slider.

Track color

You can change the active and inactive track color of the slider using the activeTrackColor and inactiveTrackColor properties respectively.

The active side of the slider is between the min value and the thumb.

The inactive side of the slider is between the thumb and the max value.

NOTE

You must import the theme.dart library from the Core package to use SfSliderTheme.

Horizontal

DART

double _value = 5.0;

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
              child: SfSliderTheme(
                data: SfSliderThemeData(
                  activeTrackColor: Colors.red,
                  inactiveTrackColor: Colors.red[100],
                ),
                child:  SfSlider(
                  min: 2.0,
                  max: 10.0,
                  value: _value,
                  onChanged: (dynamic newValue){
                    setState(() {
                      _value = newValue;
                    });
                  },
                ),
              )
          )
      )
  );
}

Vertical

DART

double _value = 5.0;

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
              child: SfSliderTheme(
                data: SfSliderThemeData(
                  activeTrackColor: Colors.red,
                  inactiveTrackColor: Colors.red[100],
                ),
                child:  SfSlider.vertical(
                  min: 2.0,
                  max: 10.0,
                  value: _value,
                  onChanged: (dynamic newValue){
                    setState(() {
                      _value = newValue;
                    });
                  },
                ),
              )
          )
      )
  );
}

Track height

You can change the track height of the slider using the activeTrackHeight and inactiveTrackHeight properties. The default value of the activeTrackHeight and the inactiveTrackHeight properties are 6.0 and 4.0.

NOTE

You must import the theme.dart library from the Core package to use SfSliderTheme.

Horizontal

DART

double _value = 5.0;

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
              child: SfSliderTheme(
                data: SfSliderThemeData(
                  activeTrackHeight: 8,
                  inactiveTrackHeight: 8,
                ),
                child: SfSlider(
                  min: 2.0,
                  max: 10.0,
                  value: _value,
                  onChanged: (dynamic newValue){
                    setState(() {
                      _value = newValue;
                    });
                  },
                ),
              )
          )
      )
  );
}

Vertical

DART

double _value = 5.0;

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
              child: SfSliderTheme(
                data: SfSliderThemeData(
                  activeTrackHeight: 8,
                  inactiveTrackHeight: 8,
                ),
                child: SfSlider.vertical(
                  min: 2.0,
                  max: 10.0,
                  value: _value,
                  onChanged: (dynamic newValue){
                    setState(() {
                      _value = newValue;
                    });
                  },
                ),
              )
          )
      )
  );
}

Track corner radius

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

NOTE

You must import the theme.dart library from the Core package to use SfSliderTheme.

Horizontal

DART

double _value = 5.0;

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
              child: SfSliderTheme(
                data: SfSliderThemeData(
                  activeTrackHeight: 10,
                  inactiveTrackHeight: 10,
                  trackCornerRadius: 5,
                ),
                child: SfSlider(
                  min: 2.0,
                  max: 10.0,
                  value: _value,
                  onChanged: (dynamic newValue){
                    setState(() {
                      _value = newValue;
                    });
                  },
                ),
              )
          )
      )
  );
}

Vertical

DART

double _value = 5.0;

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
              child: SfSliderTheme(
                data: SfSliderThemeData(
                  activeTrackHeight: 10,
                  inactiveTrackHeight: 10,
                  trackCornerRadius: 5,
                ),
                child: SfSlider.vertical(
                  min: 2.0,
                  max: 10.0,
                  value: _value,
                  onChanged: (dynamic newValue){
                    setState(() {
                      _value = newValue;
                    });
                  },
                ),
              )
          )
      )
  );
}