0

I am trying to change the thumb color of my slider.

Here is my code:

SliderTheme(
                    data: SliderThemeData(
                      thumbColor: Colors.pink,
                    ),
                    child: Slider(
                      value: height.toDouble(),
                      min: 120,
                      max: 220,
                      onChanged: (double newValue){
                        setState(() {
                          height = newValue.toInt();
                        });
                      },
                      inactiveColor: Color(0xff8d8e98),
                      activeColor: Colors.white,
                    ),
                  )

Here is the output: slider

However if I remove activeColor: Colors.white property from above code then I am getting the desired thumb color.

However if I add activeColor parameter back then even thumb color changes.

How to get thumb color as pink and active color as white?

Here is my required output:

slider

Aditya
  • 325
  • 6
  • 19

2 Answers2

0

Try using activeTrackColor: rather than activeColor:, e.g:

data: SliderThemeData(
  thumbColor: Colors.pink,
  activeTrackColor: Colors.white,
  inactiveColor: Color(0xff8d8e98),
),
PatrickMahomes
  • 844
  • 1
  • 6
  • 8
0

You can use overlayColor for shade around thumb and activeTrackColor properties of SliderThemeData.

SliderTheme(
      data: SliderThemeData(
        thumbColor: Colors.pink,
        overlayColor:Colors.pink[50],
        activeTrackColor: Colors.white,
      ),
      child: Slider(
        value: sliderValue.toDouble(),
        max: 100.0,
        min: 0.0,
        inactiveColor: Colors.grey,
        onChanged: (double newValue) {
          setState(() {
            sliderValue = newValue;
          });
        },
      ),
    );
Mohit Kushwaha
  • 1,003
  • 1
  • 10
  • 15