How to progammatically change existing SfRangeSelector Thumb Values

[Peter]

I have a SfRangeSelector already working and displayed.

How to I programmatically change the Thumb values?
I tried changing the initialValues and refresh but it does not change 'visually'.
I can still drag the thumbs; it does not move visually but I can still update the main chart. 

Help!

[Lakshmi Radha Krishnan]

Hi, 

 

Greetings from Syncfusion support. 

 

You can programmatically change the thumb values of the range selector using the RangeController.start and RangeController.end values. We have added code snippet for your reference. 

 

https://help.syncfusion.com/flutter/range-selector/range-controller  

 

Code Snippet: 

class _RangeSelectorPageState extends State<RangeSelectorPage> {
  final double _min = 2.0;
  final double _max = 10.0;
  SfRangeValues _values = SfRangeValues(4.0, 6.0);
  late RangeController _rangeController;

  @override
  void initState() {
    super.initState();
    _rangeController = RangeController(start: _values.start, end: _values.end);
  }

  @override
  void dispose() {
    _rangeController.dispose();
    super.dispose();
  }

  final List<DataModel> chartData = <DataModel>[
    DataModel(x: 2.0, y: 2.2),
    DataModel(x: 3.0, y: 3.4),
    DataModel(x: 4.0, y: 2.8),
    DataModel(x: 5.0, y: 1.6),
    DataModel(x: 6.0, y: 2.3),
    DataModel(x: 7.0, y: 2.5),
    DataModel(x: 8.0, y: 2.9),
    DataModel(x: 9.0, y: 3.8),
    DataModel(x: 10.0, y: 3.7),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SfRangeSelector(
              min: _min,
              max: _max,
              controller: _rangeController,
              child: Container(
                height: 130,
                child: SfCartesianChart(
                  margin: const EdgeInsets.all(0),
                  primaryXAxis: NumericAxis(
                      minimum: _min, maximum: _max, isVisible: false),
                  primaryYAxis: NumericAxis(isVisible: false),
                  plotAreaBorderWidth: 0,
                  series: <SplineAreaSeries<DataModel, double>>[
                    SplineAreaSeries<DataModel, double>(
                        color: Color.fromARGB(255, 126, 184, 253),
                        dataSource: chartData,
                        xValueMapper: (DataModel sales, int index) => sales.x,
                        yValueMapper: (DataModel sales, int index) => sales.y)
                  ],
                ),
              ),
            ),
            SizedBox(height: 40),
            Text(
                'Move thumbs of the below slider to update the above range selector thumbs'),
            SfRangeSlider(
                min: _min,
                max: _max,
                values: _values,
                onChanged: (SfRangeValues newValues) {
                  setState(() {
                    _values = newValues;
                    _rangeController.start = _values.start;
                    _rangeController.end = _values.end;
                  });
                })
          ],
        ),
      ),
    );
  }
}

class DataModel {
  DataModel({required this.x, required this.y});

  final double x;
  final double y;
}

 

 

Kindly let us know if you need further assistance with this. 

 

Regards, 

Lakshmi R. 

[Peter]

Hi Lakshmi

I have tried what you suggested. Yes, it works!

Thank you very much.

[Lakshmi Radha Krishnan]

Hi Peter, 

  

Most welcome. Feel free to contact us if you need any other assistance. 

  

Regards, 

Lakshmi R.