CODEWITHSUNDEEP
flutterdart
Ahalya Raj
Ahalya Raj

Reputation: 91

How to have two range values in RangeSlider flutter

I need a RangeSlider which shows hours in a day. Now I am displaying it by having RangeValue(0,24) I need to show 0-12 AM in left and 1-12 PM in right Is there any way to split RangeValues like that

class ClockRangeWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() => _ClockRangeWidget();
}

class _ClockRangeWidget extends State<ClockRangeWidget> {
RangeValues _currentRangeValues = const RangeValues(0, 24);

static String _valueToString(double value) {
return value.toStringAsFixed(0);
}

@override
Widget build(BuildContext context) {
return SliderTheme(
data: SliderThemeData(
    activeTrackColor: kPrimaryColor,
    inactiveTrackColor: Colors.grey[300],
    trackHeight: 6.0,
    thumbColor: Colors.white,
    activeTickMarkColor: kPrimaryColor,
    inactiveTickMarkColor:Colors.grey[300],
    valueIndicatorColor: Colors.grey,
    valueIndicatorTextStyle: TextStyle(
      color: Colors.white,
    ),
  ),
  child: RangeSlider(
    values: _currentRangeValues,
    min: 0,
    max: 24,
    divisions: 23,
    labels: RangeLabels(
      _currentRangeValues.start.round() >= 12 ? _currentRangeValues.start.round().toString() + '.00 PM' : _currentRangeValues.start.round().toString() + '.00 AM',
      _currentRangeValues.end.round() >= 12 ? _currentRangeValues.end.round().toString() + '.00 PM' : _currentRangeValues.end.round().toString() + '.00 AM',
    ),
    onChanged: (RangeValues values) {
      setState(() {
        _currentRangeValues = values;
      });
    },
  ),
);
 }
 }

Upvotes: 1

Views: 1173

Answers (1)

danle
danle

Reputation: 762

Increase divisions to 24 for the slider to divide correctly. Then you should be able to format them based on the RangeValues.

class ClockRangeWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _ClockRangeWidget();
}

class _ClockRangeWidget extends State<ClockRangeWidget> {
  RangeValues _currentRangeValues = const RangeValues(0, 24);

  static String _valueToString(double value) {
    return value.toStringAsFixed(0);
  }

  @override
  Widget build(BuildContext context) {
    return SliderTheme(
      data: SliderThemeData(
        inactiveTrackColor: Colors.grey[300],
        trackHeight: 6.0,
        thumbColor: Colors.white,
        inactiveTickMarkColor: Colors.grey[300],
        valueIndicatorColor: Colors.grey,
        valueIndicatorTextStyle: TextStyle(
          color: Colors.white,
        ),
      ),
      child: RangeSlider(
        values: _currentRangeValues,
        min: 0,
        max: 24,
        divisions: 24,
        labels: RangeLabels(
          _getLabel(_currentRangeValues.start),
          _getLabel(_currentRangeValues.end),
        ),
        onChanged: (RangeValues values) {
          setState(() {
            _currentRangeValues = values;
          });
        },
      ),
    );
  }

  String _getLabel(double value) {
    if (value > 12.0) {
      return "${(value - 12.0).round()} PM";
    } else {
      return "${value.round()} AM";
    }
  }
}

Upvotes: 1

Related Questions