import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(useMaterial3: true),
      home: const Example(),
    );
  }
}

class Example extends StatefulWidget {
  const Example({super.key});

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  double _sliderValue = 0.5;
  RangeValues _rangeSliderValues = const RangeValues(0.25, 0.75);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sliders'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _buildSlider(range: false),
          _buildSlider(
            range: false,
            rectangularSliderValueIndicatorShape:
                const RectangularSliderValueIndicatorShape(),
          ),
          _buildSlider(
            range: false,
            paddleSliderValueIndicatorShape:
                const PaddleSliderValueIndicatorShape(),
          ),
          _buildSlider(
            range: true,
            rectangularRangeSliderValueIndicatorShape:
                const RectangularRangeSliderValueIndicatorShape(),
          ),
          _buildSlider(
            range: true,
            paddleRangeSliderValueIndicatorShape:
                const PaddleRangeSliderValueIndicatorShape(),
          ),
        ],
      ),
    );
  }

  Widget _buildSlider({
    bool range = false,
    RectangularSliderValueIndicatorShape? rectangularSliderValueIndicatorShape,
    PaddleSliderValueIndicatorShape? paddleSliderValueIndicatorShape,
    RectangularRangeSliderValueIndicatorShape? rectangularRangeSliderValueIndicatorShape,
    PaddleRangeSliderValueIndicatorShape? paddleRangeSliderValueIndicatorShape,
  }) {
    if (range) {
      return SliderTheme(
        data: SliderThemeData(
          rangeValueIndicatorShape: rectangularRangeSliderValueIndicatorShape ??
              paddleRangeSliderValueIndicatorShape,
          valueIndicatorColor: Theme.of(context).colorScheme.surface,
          valueIndicatorStrokeColor: Theme.of(context).colorScheme.tertiary,
          showValueIndicator: ShowValueIndicator.always,
          valueIndicatorTextStyle: TextStyle(
            color: Theme.of(context).colorScheme.onSurface,
          ),
        ),
        child: RangeSlider(
          values: _rangeSliderValues,
          onChanged: (value) {
            setState(() {
              _rangeSliderValues = value;
            });
          },
          labels: RangeLabels(
            _rangeSliderValues.start.round().toString(),
            _rangeSliderValues.end.round().toString(),
          ),
          min: 0,
          max: 1,
        ),
      );
    }
    return SliderTheme(
      data: SliderThemeData(
        valueIndicatorShape: rectangularSliderValueIndicatorShape ??
            paddleSliderValueIndicatorShape,
        valueIndicatorColor: Theme.of(context).colorScheme.surface,
        valueIndicatorStrokeColor: Theme.of(context).colorScheme.tertiary,
        showValueIndicator: ShowValueIndicator.always,
        valueIndicatorTextStyle: TextStyle(
          color: Theme.of(context).colorScheme.onSurface,
        ),
      ),
      child: Slider(
        value: _sliderValue,
        onChanged: (value) {
          setState(() {
            _sliderValue = value;
          });
        },
        label: _sliderValue.round().toString(),
        min: 0,
        max: 1,
      ),
    );
  }
}