How to customize the drag circle

[itMcdull]

expected

How should I do it?

[suragch]

Currently there is no way to do that with this package. It would take reworking the thumb as a Widget rather than a plain circle. You'll need to build a custom widget for your use case.

I'll leave this issue open, though, because having a thumb widget would be useful to add in the future.

[itMcdull]

  void _drawThumb(Canvas canvas, Size localSize) {
    final thumbPaint = Paint()..color = thumbColor;
    final barCapRadius = _barHeight / 2;
    final availableWidth = localSize.width - _barHeight;
    var thumbDx = _thumbValue * availableWidth + barCapRadius;
    if (!_thumbCanPaintOutsideBar) {
      thumbDx = thumbDx.clamp(barCapRadius, localSize.width - barCapRadius);
    }
    final rect = Rect.fromCenter(
      center: Offset(thumbDx, localSize.height / 2),
      width: 2,
      height: 40,
    );
    canvas.drawRect(
      rect,
      thumbPaint..style = PaintingStyle.fill,
    );
    // Draw the blue circles at the top and bottom of the vertical line
    final circlePaint = Paint()
      ..color = thumbColor
      ..style = PaintingStyle.fill;
    canvas.drawCircle(
      Offset(thumbDx, barCapRadius + 28),
      barCapRadius,
      circlePaint,
    );
    canvas.drawCircle(
      Offset(thumbDx, localSize.height - 28),
      barCapRadius,
      circlePaint,
    );
  }

Modify _drawThumb to do