How to draw custom thumb in Flutter Range Slider?

In Flutter RangeSlider, you can easily customize the slider’s thumb to suit various use cases. This article will guide you through the process of creating a custom thumb.

Step 1: Import the required packages

Add the Syncfusion® Flutter Sliders package to your dependencies in the pubspec.yaml file.

Step 2: Customizing the SfRangeSlider with a Rectangular Thumb

This implementation enhances the SfRangeSlider by integrating a custom rectangular thumb shape using CustomRangeThumbShape. The SfRangeSlider.min and SfRangeSlider.max properties define the slider’s value range in load time. Selected values are displayed in red-colored labels positioned above the thumbs. Additionally, the SfRangeSliderTheme is applied to style the track, with an active red color and an inactive grey color, ensuring a visually appealing design.

 SfRangeValues _values = const SfRangeValues(3000.0, 17000.0);
 final double _min = 0.0;
 final double _max = 20000.0;

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Container(
       color: Colors.grey[200],
       child: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             ...
             Padding(
               padding: const EdgeInsets.symmetric(
                   horizontal: 20.0, vertical: 10.0),
               child: SfRangeSliderTheme(
                 data: SfRangeSliderThemeData(
                   activeTrackColor: Colors.red,
                   inactiveTrackColor: Colors.grey[300],
                   trackCornerRadius: 0,
                   activeTrackHeight: 4,
                   inactiveTrackHeight: 4,
                   thumbColor: Colors.grey[300],
                   overlayRadius: 0.0,
                 ),
                 child: SfRangeSlider(
                   min: _min,
                   max: _max,
                   values: _values,
                   thumbShape: _CustomRangeThumbShape(),
                   onChanged: (SfRangeValues values) {
                     setState(() {
                       _values = values;
                     });
                   },
                 ),
               ),
             ),
           ],
         ),
       ),
     ),
   );
 }

Step 3: Custom Range Slider with Rectangular Thumb Design

This implementation customizes the SfThumbShape class by creating a rectangular thumb with a shadow effect and subtle border. The thumb features three horizontal lines for better grip, ensuring a sleek and functional design. The paint method is overridden to define the thumb’s appearance, while the getPreferredSize method sets its dimensions.

class _CustomRangeThumbShape extends SfThumbShape {
  @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 Canvas canvas = context.canvas;

    // Size of the rectangular thumb
    final double thumbWidth = 15;
    final double thumbHeight = 25;

    // Draw main thumb rectangle
    final Paint thumbPaint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill;

    final Rect thumbRect = Rect.fromCenter(
      center: center,
      width: thumbWidth,
      height: thumbHeight,
    );

    // Draw white rectangle with shadow effect
    canvas.drawRRect(
      RRect.fromRectAndRadius(thumbRect, Radius.circular(3)),
      thumbPaint,
    );

    // Add subtle border around the thumb
    final Paint borderPaint = Paint()
      ..color = Colors.grey[400]!
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0;

    canvas.drawRRect(
      RRect.fromRectAndRadius(thumbRect, Radius.circular(3)),
      borderPaint,
    );

    // Draw the three horizontal lines inside the thumb
    final Paint linePaint = Paint()
      ..color = Colors.grey[600]!
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0;

    final double lineSpacing = 4.0;
    final double lineWidth = 8.0;

    for (int i = 0; i < 3; i++) {
      final double yOffset = center.dy + (i - 1) * lineSpacing;
      canvas.drawLine(
        Offset(center.dx - lineWidth / 2, yOffset),
        Offset(center.dx + lineWidth / 2, yOffset),
        linePaint,
      );
    }
  }

  @override
  Size getPreferredSize(SfSliderThemeData themeData) {
    return Size(20.0, 30.0); // Width and height of the thumb
  }
}

By following these steps and using the provided code snippet, you can successfully create a customized slider thumb in the SfRangeSlider widget.

View the sample in Github

Conclusion

I hope you enjoyed learning about how to draw custom thumb in Flutter Range Slider

You can refer to our Flutter Range Slider feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation 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!