How do I create a custom widget like this in Flutter?

i have made this for you specially i made is to keep min max dynamic and on Change Post back
now it’s upto you to customize UI further using Custom Painter etc..

import 'package:flutter/material.dart';

class GradientSlider extends StatefulWidget {
  final double min;
  final double max;
  final Function(double) onValueChanged; // Postback function

  GradientSlider(
      {required this.min, required this.max, required this.onValueChanged});

  @override
  _GradientSliderState createState() => _GradientSliderState();
}

class _GradientSliderState extends State<GradientSlider> {
  double _sliderValue = 0;

  @override
  void initState() {
    super.initState();
    _sliderValue = (widget.max + widget.min) /
        2; // Set initial value to the middle of the range
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent, // Keep the background transparent
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // The custom slider widget
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 25),
            child: LayoutBuilder(
              builder: (context, constraints) {
                double thumbWidth = 40; // Define the width of the thumb here
                double thumbHalfWidth = thumbWidth / 2;

                return Stack(
                  alignment: Alignment.center,
                  children: [
                    CustomPaint(
                      size: Size(constraints.maxWidth, 70), // Set height to 70
                      painter: GradientSliderPainter(),
                    ),
                    SliderTheme(
                      data: SliderTheme.of(context).copyWith(
                        trackHeight: 25, // Height of the slider
                        activeTrackColor: Colors.transparent,
                        inactiveTrackColor: Colors.transparent,
                        thumbColor: Colors.transparent,
                        overlayColor: Colors.transparent,
                        thumbShape: RoundSliderThumbShape(
                          enabledThumbRadius: 0, // No radius for thumb
                          disabledThumbRadius: 0,
                        ),
                        overlayShape: RoundSliderOverlayShape(
                          overlayRadius: 0, // No overlay radius
                        ),
                      ),
                      child: Slider(
                        value: _sliderValue,
                        min: widget.min,
                        max: widget.max,
                        divisions: 10,
                        onChanged: (value) {
                          setState(() {
                            _sliderValue = value;
                            widget.onValueChanged(
                                value); // Postback function called here
                          });
                        },
                      ),
                    ),
                    // Custom thumb widget positioned correctly
                    Positioned(
                      top: 0,
                      left: (_sliderValue - widget.min) /
                              (widget.max - widget.min) *
                              (constraints.maxWidth - thumbWidth) +
                          thumbHalfWidth,
                      child: CustomThumb(), // Your custom thumb widget
                    ),
                  ],
                );
              },
            ),
          ),
          // The labels under the slider
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Flexible(
                  child: Text(
                    widget.min.toInt().toString(), // Min label
                    style: TextStyle(color: Colors.white),
                    overflow: TextOverflow.ellipsis, // Handle overflow
                  ),
                ),
                Flexible(
                  child: Text(
                    ((widget.min + widget.max) / 2)
                        .toInt()
                        .toString(), // Middle label
                    style: TextStyle(color: Colors.white),
                    overflow: TextOverflow.ellipsis, // Handle overflow
                  ),
                ),
                Flexible(
                  child: Text(
                    widget.max.toInt().toString(), // Max label
                    style: TextStyle(color: Colors.white),
                    overflow: TextOverflow.ellipsis, // Handle overflow
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

// Custom thumb widget
class CustomThumb extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Icon(
          Icons.keyboard_arrow_down_outlined,
          size: 18,
          color: Colors.white,
        ),
        Container(
          width: 10,
          height: 35,
          decoration: BoxDecoration(
            color: Colors.black,
          ),
          child: Center(
            child: Container(
              width: 1.25,
              height: 35,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
  }
}

// Custom painter for the gradient background and rounded slider
class GradientSliderPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Define the gradient colors
    final gradient = LinearGradient(
      colors: [
        const Color.fromARGB(255, 244, 109, 99),
        const Color.fromARGB(255, 247, 177, 73),
        const Color.fromARGB(255, 255, 241, 117),
        const Color.fromARGB(255, 111, 190, 255),
        const Color.fromARGB(255, 125, 190, 127)
      ],
    );

    // Define a rounded rectangle for the slider track
    final trackRect = RRect.fromRectAndRadius(
      Rect.fromLTWH(0, size.height / 2 - 10, size.width, 20),
      Radius.circular(30),
    );

    // Paint the gradient track
    final paint = Paint()..shader = gradient.createShader(trackRect.outerRect);
    canvas.drawRRect(trackRect, paint);

    // Draw tick marks
    final tickPaint = Paint()
      ..color = Colors.white
      ..strokeWidth = 2;

    double tickSpacing = size.width / 4; // Adjust for tick spacing
    for (int i = 1; i < 4; i++) {
      double dx = tickSpacing * i;
      canvas.drawLine(Offset(dx, size.height / 2 - 15),
          Offset(dx, size.height / 2 + 15), tickPaint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

how it is looks like now: