How to Set Flutter Slider Range of Negative and Positive values?

This guide explains how to set up an Flutter Slider to include both negative and positive values, with zero positioned at the center. This slider allows the thumb to start at zero, enabling movement towards negative values on one side and positive values on the other.

Step 1: Import Dependencies

Import the necessary packages in your Dart file by including the syncfusion_flutter_sliders package to use Slider widgets.

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

Step 2: Customize the SfSliderTheme

The SfSliderTheme widget is used to customize the slider’s appearance. By importing SfSliderThemeData you can customize the slider’s appearance by setting properties such as activeTrackColor which sets the color for active track, trackCornerRadius which specifies the radius for the track corners, activeTrackHeight which specifies the height for the active track and inactiveTrackHeight which specifies the height for the inactive track. You can adjust those properties based on whether the slider value is positive or negative.

class MyHomePage extends StatefulWidget {
 const MyHomePage({super.key});

 @override
 State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
 final SfColorScheme colorScheme = SfTheme.colorScheme(context);
   return Scaffold(
     body: Center(
       child: SfSliderTheme(
         data: SfSliderThemeData(
           activeTrackColor: colorScheme.primary[61],
           trackCornerRadius: 7.5,
           activeTrackHeight: 10,
           inactiveTrackHeight: 10,
         ),
         child: _buildHorizontalSlider(),
       ),
     ),
   );
 }
} 

Step 3: Implement the horizontal Slider

The _buildHorizontalSlider method creates a SfSlider widget in a horizontal orientation with minimum value is negative, and its maximum value is positive. Define a variable to store the slider value. The onChanged callback updates the slider’s value as the thumb moves along the track. The track is colored differently based on the value: negative values have one color, while positive values display another. Additionally, the thumb is painted in the corresponding color based on the current slider value.

SfSlider _buildHorizontalSlider() {
   return SfSlider(
     showTicks: true,
     showLabels: true,
     min: -10,
     max: 10,
     interval: 5,
     value: _value,
     thumbShape: _CustomThumbShape(type: SliderType.horizontal, value: _value),
     onChanged: (double value) {
       setState(
         () {
           _value = value;
         },
       );
     },
   );
 } 

Step 4: Implement the custom thumb shape

In step 3 code snippet, we use the _CustomThumbShape class to paint a custom thumb. _CustomThumbShape class extends SfThumbs to override the default behavior for rendering a slider’s thumb .

The constructor takes two parameters. One is orientation which indicating whether the slider is vertical or horizontal and another one is value which is a double representing the current value of the slider.

Then we have override the paint method to customizes how the thumb of a slider is drawn based on slider’s orientation (vertical or horizontal) and value.

We determining the thumb position using trackCenter which is calculated as the center of the parent box, which helps in positioning the thumb and halfTrackHeight which is half the height of the active track, used to calculate the dimensions of the thumb.

Defining the Rect for the thumb differently, based on whether the slider is vertical or horizontal. For a vertical slider, the thumb rectangle’s left and right edges are adjusted based on the halfTrackHeight and the y position of the thumb and for a horizontal slider, the rectangle’s top and bottom edges are defined based on the y position and halfTrackHeight.

We can change the thumb’s paint color based on whether the label is positive or negative. The paint method enables us to specify the paint color, which then colors the track according to the positive or negative value. The paint method receives a parentBox, which it uses to determine the center offset for painting. With the center value, we can accurately paint the thumb.

The drawRect method of the canvas is used to render the rectangle using the defined thumbPaint. Then the super.paint method is called to ensure any additional painting logic from the parent class is executed.

class _CustomThumbShape extends SfThumbShape {
 _CustomThumbShape({required this.type, required this.value});
 final SliderType type;
 final double value;

 @override
 void paint(PaintingContext context, Offset center,
     {required RenderBox parentBox,
     required RenderBox? child,
     required SfSliderThemeData themeData,
     SfRangeValues? currentValues,
     dynamic currentValue,
     required Paint? paint,
     required Animation<double> enableAnimation,
     required TextDirection textDirection,
     required SfThumb? thumb}) {
   final Paint thumbPaint = Paint();
   final Rect? rect;
   final Offset trackCenter =
       Offset(parentBox.size.width / 2, parentBox.size.height / 2);
   final halfTrackHeight = themeData.activeTrackHeight / 2;
   final x = center.dx;
   final y = center.dy;
   if (type == SliderType.vertical) {
     rect = Rect.fromLTRB(
       x - halfTrackHeight,
       y,
       x + halfTrackHeight,
       parentBox.size.height / 2,
     );
   } else {
     rect = Rect.fromLTRB(
       x,
       y - halfTrackHeight,
       trackCenter.dx,
       y + halfTrackHeight,
     );
   }

   thumbPaint
     ..color =
         value < 0 ? const Color(0XFFC62828) : Colors.orange.withOpacity(0.850)
     ..style = PaintingStyle.fill
     ..strokeWidth = themeData.activeTrackHeight;

   context.canvas.drawRect(rect, thumbPaint);
   super.paint(context, center,
       parentBox: parentBox,
       child: child,
       themeData: themeData,
       paint: thumbPaint,
       enableAnimation: enableAnimation,
       textDirection: textDirection,
       thumb: thumb);
 }
} 

Step 5: Implement the vertical Slider

To achieve the same behavior of the SfSlider in vertical orientation, we implemented the _buildVerticalSlider method which creates a vertical SfSlider’s widget. It functions similarly to the horizontal SfSlider, with the minimum and maximum values defined. The color of the track is painted in the same manner as the horizontal slider, using different colors for negative and positive values.

SfSlider _buildVerticalSlider() {
   return SfSlider.vertical(
     showTicks: true,
     showLabels: true,
     min: -10,
     max: 10,
     interval: 5,
     value: _value,
     thumbShape: _CustomThumbShape(type: SliderType.vertical, value: _value),
     onChanged: (dynamic value) {
       setState(
         () {
           _value = value;
         },
       );
     },
   );
 } 

Step 6: Enum class to select type

This enum helps to differentiate between slider orientations, making it easier to apply different styling and logic based on whether the slider is vertical or horizontal.

enum SliderType { vertical, horizontal } 

Following the above steps and the provided code snippet, you can successfully move the thumb between both negative and positive range values using Syncfusion® Flutter Slider widget.

Horizontal view

Vertical view

View Sample in GitHub

Conclusion

I hope you enjoyed learning how to set Flutter Slider range of negative and positive values.

You can refer to our Flutter Slider feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flatter Slider example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!