Home > OS >  how to add multiple sliders on one slider? #Flutter
how to add multiple sliders on one slider? #Flutter

Time:11-22

I want to add multiple sliders in one slider. If you're not clear about what I'm asking please refer the below image

enter image description here

I want these three squares to be sliding and get the values of them. I did some searching and could not find any flutter widget or a plugin that has the support.

I tried to use a stack and use multiple Slider widgets at the same location but it is also not working. (I know it's not a good approach.)

How can I make this happen. To have multiple sliders on the same line and get the values. Any help or ideas are very much appreciated.

CodePudding user response:

Using Stack with three sliders did not work because it was being overlapped.

I have made this Slider3X of being curious. There are few things need to fix here, start and end points missing some fractional position.

Code on Gist, dart pad

class Slider3x extends StatefulWidget {
  const Slider3x({
    Key? key,
    required this.onSliderUpdate,
    this.size = const Size(5, 10),
    this.min = 0,
    this.max = 1.0,
    this.colorX = Colors.green,
    this.colorY = Colors.blue,
    this.colorZ = Colors.redAccent,
  }) : super(key: key);

  final Function(double? x, double? y, double? z) onSliderUpdate;

  ///size of moveable 3x point            
  • Related