# Flutter xlider

{{tag>flutter xlider slider range}}

{{https://i.imgur.com/GiG4m7p.jpg}}

<code dart>
import 'package:flutter/material.dart';
import 'package:flutter_xlider/flutter_xlider.dart';

class PropSlider extends StatefulWidget {
  @override
  _PropSliderState createState() => _PropSliderState();
}

class _PropSliderState extends State<PropSlider> {
  double _lowerValue;
  double _upperValue;

  @override
  void initState() {
    // TODO: implement initState
    _lowerValue = 1;
    _upperValue = 1.5;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FlutterSlider(
      disabled: true,
      lockHandlers: true,
      lockDistance: 1,
      step: FlutterSliderStep(step: 0.1),
      values: [_lowerValue, _upperValue],
      rangeSlider: true,
      max: 5,
      min: 0,
      handler: FlutterSliderHandler(
        decoration: BoxDecoration(),
        child: Container(
//          height: 15,
          width: 0,
          decoration: new BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(50),
          ),
        ),
      ),
      rightHandler: FlutterSliderHandler(
        decoration: BoxDecoration(),
        child: Container(
          height: 15,
          width: 0,
          decoration: new BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.blue,
          ),
        ),
      ),
      trackBar: FlutterSliderTrackBar(
        inactiveTrackBarHeight: 10,
        inactiveTrackBar: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Colors.black12,
        ),
        activeTrackBarHeight: 15,
        activeTrackBar: BoxDecoration(
          borderRadius: BorderRadius.circular(4),
          color: Colors.blue,
        ),
        activeDisabledTrackBarColor: Colors.blue,
      ),
      handlerAnimation: FlutterSliderHandlerAnimation(
          curve: Curves.elasticOut,
          reverseCurve: null,
          duration: Duration(milliseconds: 700),
          scale: 1),
      onDragging: (handlerIndex, lowerValue, upperValue) {
        print('$lowerValue, $upperValue');
        _lowerValue = lowerValue;
        _upperValue = upperValue;
        setState(() {});
      },
    );
  }
}

</code>