Custom slider

// Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

class Customslider4 extends StatefulWidget {
  const Customslider4({
    Key? key,
    this.width,
    this.height,
  }) : super(key: key);

  final double? width;
  final double? height;

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

class _Customslider4State extends State<Customslider4> {
  RangeValues _currentRangeValues = const RangeValues(40, 80);

  @override
  Widget build(BuildContext context) {
    return SliderTheme(
      data: SliderTheme.of(context).copyWith(
        activeTrackColor: Colors.orangeAccent,
        inactiveTrackColor: Colors.grey,
        trackHeight: 4.0,
        thumbShape: CustomThumbImage(),
        overlayColor: Colors.orange.withAlpha(32),
        overlayShape: RoundSliderOverlayShape(overlayRadius: 28.0),
        tickMarkShape: CustomTickMarkShape(),
        activeTickMarkColor: Colors.orangeAccent,
        inactiveTickMarkColor: Colors.grey,
      ),
      child: RangeSlider(
        values: _currentRangeValues,
        min: 0,
        max: 100,
        divisions: 100,
        labels: RangeLabels(
          _currentRangeValues.start.round().toString(),
          _currentRangeValues.end.round().toString(),
        ),
        onChanged: (RangeValues values) {
          setState(() {
            _currentRangeValues = values;
          });
        },
      ),
    );
  }
}

class CustomThumbImage extends SliderComponentShape {
  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return Size(30, 30); // as per your image size
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
    required bool isDiscrete,
    required TextPainter labelPainter,
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required TextDirection textDirection,
    required double value,
    required double textScaleFactor,
    required Size sizeWithOverflow,
  }) {
    final Canvas canvas = context.canvas;
    final ImageProvider imageProvider = AssetImage(
        'https://storage.googleapis.com/flutterflow-io-6f20.appspot.com/projects/customwidget-rds5ww/assets/zmpys3oa1aoq/rangehandle.png'); // replace with your image path
    final ImageStream imageStream = imageProvider
        .resolve(ImageConfiguration(size: getPreferredSize(true, isDiscrete)));
    final ImageStreamListener listener =
        ImageStreamListener((ImageInfo image, bool _) {
      canvas.drawImage(image.image, center - Offset(15, 15),
          Paint()); // the Offset should center the thumb, adjust as needed
    });

    imageStream.addListener(listener);
  }
}

class CustomTickMarkShape extends RoundSliderTickMarkShape {
  @override
  Size getPreferredSize({
    required SliderThemeData sliderTheme,
    required bool isEnabled,
  }) {
    return Size(2.0, 10.0); // size of the larger tick marks
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required Offset thumbCenter,
    required bool isEnabled,
    required TextDirection textDirection,
  }) {
    final double tickMarkWidth = sliderTheme.trackHeight! / 3;
    final Paint paint = Paint()
      ..color = (isEnabled
          ? sliderTheme.activeTickMarkColor
          : sliderTheme.inactiveTickMarkColor)!;

    final double majorTickLength =
        getPreferredSize(sliderTheme: sliderTheme, isEnabled: isEnabled).height;
    final double minorTickLength = majorTickLength / 2;

    // Draw the major tick mark
    if (center.dx % 10 == 0) {
      context.canvas.drawLine(
        Offset(center.dx - tickMarkWidth / 2, center.dy),
        Offset(center.dx + tickMarkWidth / 2, center.dy + majorTickLength),
        paint,
      );
    }
    // Draw the minor tick mark
    else {
      context.canvas.drawLine(
        Offset(center.dx - tickMarkWidth / 2, center.dy),
        Offset(center.dx + tickMarkWidth / 2, center.dy + minorTickLength),
        paint,
      );
    }
  }
}