how can i create an slider like below: (with big tick marks)

Can someone give me the complete code because I tried the theme data and got no response.

CodePudding user response：

Add these packages to pubspec.yaml

  syncfusion_flutter_core: ^20.2.40
  syncfusion_flutter_sliders: ^20.2.40

And you can do like this:

import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';


class MySlider extends StatefulWidget {
  const MySlider({Key key}) : super(key: key);

  @override
  State<MySlider> createState() => _MySliderState();
}

class _MySliderState extends State<MySlider> {
  double _value = 0;
  @override
  Widget build(BuildContext context) {
    return SfSliderTheme(
      data: SfSliderThemeData(
        activeTrackHeight: 5,
        thumbRadius: 10,
        inactiveTrackHeight: 5,
        activeDividerRadius: 5,
        activeDividerStrokeWidth: 5,
        inactiveDividerRadius: 5,
        overlayColor: Colors.transparent,
        thumbColor: const Color(0xff0aff6c),
        activeDividerColor: Colors.grey,
        activeTrackColor: Colors.grey,
        overlayRadius: 100,
      ),
      child: SfSlider(
        min: 0.0,
        max: 4.0,
        interval: 1,
        showDividers: true,
        value: _value,
        stepSize: 1,
        onChanged: (dynamic newValue) {
          setState(() {
            _value = newValue;
          });
        },
      ),
    );
  }
}

play with values to get the best

and read syncfusion_flutter_sliders and check this page