Enabled and Disabled States in Flutter Slider (SfSlider)

18 Nov 201814 minutes to read

This section explains the enabled and disabled states in the Flutter Flutter Slider.

Enabled state

The slider will be in enabled state if onChanged is set.

Horizontal

DART

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

class EnabledStatePage extends StatefulWidget {
  @override
  _EnabledStatePageState createState() => _EnabledStatePageState();
}

class _EnabledStatePageState extends State<EnabledStatePage> {
  double _value = 5.0;

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

Vertical

DART

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

class VerticalEnabledStatePage extends StatefulWidget {
  @override
  _VerticalEnabledStatePageState createState() => _VerticalEnabledStatePageState();
}

class _VerticalEnabledStatePageState extends State<VerticalEnabledStatePage> {
  double _value = 5.0;

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

Disabled state

The Flutter Slider will be in disabled state if onChanged is null.

Horizontal

DART

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

class DisabledStatePage extends StatefulWidget {
  @override
  _DisabledStatePageState createState() => _DisabledStatePageState();
}

class _DisabledStatePageState extends State<DisabledStatePage> {
  double _value = 5.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfSlider(
                  min: 0.0,
                  max: 10.0,
                  value: _value,
                  onChanged: null,
                )
            )
        )
    );
  }
}

Vertical

DART

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

class VerticalDisabledStatePage extends StatefulWidget {
  @override
  _VerticalDisabledStatePageState createState() => _VerticalDisabledStatePageState();
}

class _VerticalDisabledStatePageState extends State<VerticalDisabledStatePage> {
  double _value = 5.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfSlider.vertical(
                  min: 0.0,
                  max: 10.0,
                  value: _value,
                  onChanged: null,
                )
            )
        )
    );
  }
}

Disabled color

You can change the following:

• The color of the active and inactive track in disabled state using the disabledActiveTrackColor and disabledInactiveTrackColor properties.
• The color of the active and inactive major ticks in disabled state using the disabledActiveTickColor and disabledInactiveTickColor properties.
• The color of the active and inactive minor ticks in disabled state using the disabledActiveMinorTickColor and disabledInactiveMinorTickColor properties.
• The color of the active and inactive dividers in disabled state using the disabledActiveDividerColor and disabledInactiveDividerColor properties.
• The color of the thumb in disabled state using the disabledThumbColor property.

Horizontal

DART

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

class DisabledColorPage extends StatefulWidget {
  @override
  _DisabledColorPageState createState() => _DisabledColorPageState();
}

class _DisabledColorPageState extends State<DisabledColorPage> {
  double _value = 6.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfSliderTheme(
                  data: SfSliderThemeData(
                    disabledActiveTrackColor: Colors.orange,
                    disabledInactiveTrackColor: Colors.orange[200],
                    disabledActiveTickColor: Colors.orange,
                    disabledInactiveTickColor: Colors.orange[200],
                    disabledActiveMinorTickColor: Colors.orange,
                    disabledInactiveMinorTickColor: Colors.orange[200],
                    disabledActiveDividerColor: Colors.purple,
                    disabledInactiveDividerColor: Colors.purple[200],
                    disabledThumbColor: Colors.orange,
                  ),
                  child: SfSlider(
                    min: 2.0,
                    max: 10.0,
                    interval: 2,
                    showTicks: true,
                    minorTicksPerInterval: 1,
                    showDividers: true,
                    value: _value,
                    onChanged: null,
                  ),
                )
            )
        )
    );
  }
}

Vertical

DART

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

class VerticalDisabledColorPage extends StatefulWidget {
  @override
  _VerticalDisabledColorPageState createState() => _VerticalDisabledColorPageState();
}

class _VerticalDisabledColorPageState extends State<VerticalDisabledColorPage> {
  double _value = 6.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfSliderTheme(
                  data: SfSliderThemeData(
                    disabledActiveTrackColor: Colors.orange,
                    disabledInactiveTrackColor: Colors.orange[200],
                    disabledActiveTickColor: Colors.orange,
                    disabledInactiveTickColor: Colors.orange[200],
                    disabledActiveMinorTickColor: Colors.orange,
                    disabledInactiveMinorTickColor: Colors.orange[200],
                    disabledActiveDividerColor: Colors.purple,
                    disabledInactiveDividerColor: Colors.purple[200],
                    disabledThumbColor: Colors.orange,
                  ),
                  child: SfSlider.vertical(
                    min: 2.0,
                    max: 10.0,
                    interval: 2,
                    showTicks: true,
                    minorTicksPerInterval: 1,
                    showDividers: true,
                    value: _value,
                    onChanged: null,
                  ),
                )
            )
        )
    );
  }
}