Customizing library

[bastolaxantos]

Its not actually a issue but a question.

I want to build the range slider widget similar to the picture.
I tried customizing library but I could not make it just like the image.
I was able to change the colors and slider line thickness but not able to change left and right thumb radius.
Anyone here knows how can I customize it so that it fits my need? Any suggestion is appreciated.

[mjschaefer9395]

Hi Santosh,

Would you please share how you were able to change the slider line thickness (trackHeight)? I have not been able to do so and therefore have opened #19.

Thank you

[DineshTamang]

import 'package:flutter/material.dart';

class CustomSliderThumb extends SliderComponentShape {
  const CustomSliderThumb({
    this.outerRadius = 12.0,
    this.innerRadius,
  });

  final double outerRadius, innerRadius;

  double get _disabledThumbRadius =>
      innerRadius ?? outerRadius * 1 / 3;

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return Size.fromRadius(
        isEnabled ? outerRadius : _disabledThumbRadius);
  }

  @override
  void paint(PaintingContext context, Offset center,
      {Animation<double> activationAnimation,
        Animation<double> enableAnimation,
        bool isDiscrete,
        TextPainter labelPainter,
        RenderBox parentBox,
        SliderThemeData sliderTheme,
        TextDirection textDirection,
        double value}) {
    final Canvas canvas = context.canvas;

    canvas.drawCircle(
        center,
        outerRadius,
        Paint()..color = sliderTheme.thumbColor
    );
    canvas.drawCircle(
        center,
        innerRadius,
        Paint()..color = sliderTheme.disabledThumbColor
    );
  }
}

I customized the thumb using the above code in the slider theme data in thumb shape as follows:

SliderTheme(
            data: Theme.of(context).sliderTheme.copyWith(
                thumbColor: Colors.white,
                disabledThumbColor: Colors.blue[800],
                thumbShape: CustomSliderThumb(outerRadius: 12,innerRadius: 8),
                trackHeight: 8.0,
                activeTrackColor: AzeraColors.rangeSliderActive, //color
                inactiveTrackColor: AzeraColors.rangeSliderInactive, //color
                trackShape: CustomSliderTrackShape()
            ),
            child: RangeSlider(
              min: 0,
              max: 12,
              lowerValue: _lowerValue,
              upperValue: _upperValue,
              showValueIndicator: true,
              onChanged: (double newLowerValue, double newUpperValue){
                setState(() {
                  _lowerValue = newLowerValue;
                  _upperValue = newUpperValue;
                });
              },
            ),
          ),

You can change the radius and color to you preference. I used canvas.drawCircle to draw two circle as the thumb.

But I am not being able to change the Track Height. A little help with the track height please.
thank you.

Result