import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  RangeValues _sliderValues = const RangeValues(0.0, 1.0);

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        sliderTheme: const SliderThemeData(
          // padding: EdgeInsets.symmetric(vertical: 4),
          thumbColor: Colors.red,
          inactiveTrackColor: Colors.amber,
        ),
      ),
      home: Scaffold(
        body: Directionality(
          textDirection: TextDirection.ltr,
          child: Center(
            child: Card(
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(4.0)),
              ),
              color: Theme.of(context).colorScheme.surfaceContainerHighest,
              margin: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Padding(
                padding: const EdgeInsetsDirectional.all(16),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Placeholder(fallbackHeight: 100.0),
                    RangeSlider(
                      values: _sliderValues,
                      onChanged: (RangeValues values) {
                        setState(() {
                          _sliderValues = values;
                        });
                      },
                    ),
                    const Placeholder(fallbackHeight: 100.0),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}