import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        sliderTheme: const SliderThemeData(
          showValueIndicator: ShowValueIndicator.always,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('RangeSlider Sample')),
        body: const RangeSliderExample(),
      ),
    );
  }
}

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

  @override
  State<RangeSliderExample> createState() => _RangeSliderExampleState();
}

class _RangeSliderExampleState extends State<RangeSliderExample> {
  RangeValues _currentRange1Values = const RangeValues(20.0, 60.0);
  RangeValues _currentRange2Values = const RangeValues(30.0, 80.0);

  @override
  Widget build(BuildContext context) {
    return Column(
      spacing: 20.0,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RangeSlider(
          year2023: false,
          values: _currentRange1Values,
          max: 100,
          onChanged: (RangeValues values) {
            setState(() {
              _currentRange1Values = values;
            });
          },
        ),
        RangeSlider(
          year2023: false,
          values: _currentRange2Values,
          max: 100,
          divisions: 10,
          labels: RangeLabels(
            _currentRange2Values.start.round().toString(),
            _currentRange2Values.end.round().toString(),
          ),
          onChanged: (RangeValues values) {
            setState(() {
              _currentRange2Values = values;
            });
          },
        ),
      ],
    );
  }
}