enter image description here

I want this type Of range Slider in My U.i

i want affectable solution with out any library

CodePudding user response：

In Slider you can't pass gradient Directly because Slider just Accept Color.

but you could add Container and graident Color then add your Slider

...

     Container(
        height: 10,
        width: 200,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),

          // gradient colors
          gradient: LinearGradient(colors: [
            Colors.red,
            Colors.blue,
          ]),
        ),
        child: SliderTheme(
          data: SliderThemeData(
            overlayShape: SliderComponentShape.noOverlay,
          ),
          child: Slider(
           
            // you have to transparent colors to show gradient colors
            activeColor: Colors.transparent,
            inactiveColor: Colors.transparent,
            thumbColor: Colors.green,
            onChanged: (v) => setState(() => value = v),
            value: value,
          ),
        ),
      

if you find any grammer mistake in my english or my solution feel free to edit it :)