RangeSlider
RangeSlider copied to clipboard
Customizing library
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.
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 https://github.com/boeledi/RangeSlider/issues/19.
Thank you
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