slider_with_indicator.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: CurrencySlider(
            min: 0,
            max: 5000,
            initialValue: 0,
          ),
        ),
      ),
    );
  }
}

class CurrencySlider extends StatefulWidget {
  final double min;
  final double max;
  final double initialValue;
  final ValueChanged<double>? onChanged;

  const CurrencySlider({
    Key? key,
    required this.min,
    required this.max,
    required this.initialValue,
    this.onChanged,
  }) : super(key: key);

  @override
  State<CurrencySlider> createState() => _CurrencySliderState();
}

class _CurrencySliderState extends State<CurrencySlider> {
  double _currentValue = 0.0;
  double _sliderHeight = 0.0; // Added to store slider height

  @override
  void initState() {
    _currentValue = widget.initialValue;
    super.initState();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // Get slider height after widget has rendered
      final RenderBox sliderBox = context.findRenderObject() as RenderBox;
      _sliderHeight = sliderBox.size.height;
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    return Stack(
      children: [
        Slider(
          min: widget.min,
          max: widget.max,
          value: _currentValue,
          onChanged: (value) {
            setState(() {
              _currentValue = value;
              if (widget.onChanged != null) {
                widget.onChanged!(value);
              }
            });
          },
        ),
        Positioned(
          top: 900 - _sliderHeight, // Adjust position as needed
          left: ((_currentValue - widget.min) / (widget.max - widget.min)) *
                  screenSize.width -
              25.0, // Adjust offset and size as needed
          child: Container(
            padding: EdgeInsets.all(5.0),
            decoration: BoxDecoration(
              color: Colors.blueGrey,
              borderRadius: BorderRadius.circular(5.0),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.3),
                  blurRadius: 5.0,
                  offset: Offset(0.0, 2.0),
                ),
              ],
            ),
            child: Text(
              "₹${_currentValue.toStringAsFixed(0)}",
              style: TextStyle(
                color: Colors.black,
                fontSize: 16.0,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

// class CurrencySlider extends StatefulWidget {
//   final double min;
//   final double max;
//   final double initialValue;
//   final ValueChanged<double>? onChanged;

//   const CurrencySlider({
//     Key? key,
//     required this.min,
//     required this.max,
//     required this.initialValue,
//     this.onChanged,
//   }) : super(key: key);

//   @override
//   State<CurrencySlider> createState() => _CurrencySliderState();
// }

// class _CurrencySliderState extends State<CurrencySlider> {
//   double _currentValue = 0;

//   @override
//   void initState() {
//     _currentValue = widget.initialValue;
//     super.initState();
//   }

//   @override
//   Widget build(BuildContext context) {
//     double width = MediaQuery.of(context).size.width;
//     return Stack(
//       children: [
//         Slider(
//           min: widget.min,
//           max: widget.max,
//           value: _currentValue,
//           onChanged: (value) {
//             setState(() {
//               _currentValue = value;
//               if (widget.onChanged != null) {
//                 widget.onChanged!(value);
//               }
//             });
//           },
//         ),
//         Positioned(
//           top: 280.0, // Adjust position as needed
//           left: ((_currentValue - widget.min) / (widget.max - widget.min)) *
//                   width -
//               25.0, // Adjust offset and size as needed
//           child: Container(
//             padding: EdgeInsets.all(5.0),
//             decoration: BoxDecoration(
//               color: Colors.blueGrey,
//               borderRadius: BorderRadius.circular(5.0),
//               boxShadow: [
//                 BoxShadow(
//                   color: Colors.grey.withOpacity(0.3),
//                   blurRadius: 5.0,
//                   offset: Offset(0.0, 2.0),
//                 ),
//               ],
//             ),
//             child: Text(
//               "₹${_currentValue.toStringAsFixed(0)}",
//               style: TextStyle(
//                 color: Colors.black,
//                 fontSize: 16.0,
//               ),
//             ),
//           ),
//         ),
//       ],
//     );
//   }
// }