Search code examples
fluttercolorssliderdivision

How to change color of divisions in Slider flutter


Hello i have slider with divisions. What is the theme property for changing divisions color so they are not visible?


Solution

  • Please see this example and let me know if you need any further help :

    SliderTheme(
      data: SliderTheme.of(context).copyWith(
        trackHeight: 10.0,
        minThumbSeparation: 2,
        thumbColor: Colors.white,
        thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12.0),
        overlayColor:Colors.deepPurple,
        inactiveTickMarkColor: Colors.amber,
        inactiveTrackColor: Colors.green,
      ),
      child: Slider(
        min: 1,
        max: 100,
        value: 45,
        divisions: 2,
        onChanged: (newValue) {
          // set the new value here
          setState(() {
            progress= newValue;
          });
        },
      ),
    )
    

    Let's demonstrate some params:

    1. The Main Param for changing the color of the divisions is inactiveTickMarkColor param in SliderTheme object which is amber in our case. Feel free to change it as you want.

    2. The inactiveTrackColor param is the color of the slider when the area is not in the active rang.

    3. The overlayColor param is the color of the widget that appears when you press or focus on the selector widget.