How can I increase the "touch zone" of my Flutter slider widget?

Question

I am using a Flutter slider widget, where tapping/dragging on the slider moves the progress/activeColor of the slider. However, it seems like only directly touching the slider causes an event to happen, and it's hard to always touch a finger directly onto the slider. Is there a way to expand the Slider's "touch zone"? This is what I have:

return new Center(
    child: new Container(
      height: 2.0,
      child: new Slider(
        min: 0.0,
        max: 1.0,
        activeColor: Colors.grey[50],
        value: _getUnitProgress(model),
        onChanged: (double value) => _unitSeek(value, model),
      ),
   ),
);

Modify the thumbShape property in the SliderTheme. In this answer you can see an example https://stackoverflow.com/a/61527069/3793165 — abanet, Apr 30 '20 at 15:30

score 5 · Answer 1 · answered Jun 27 '19 at 12:58

I faced a very similar issue recently and found that it was too easy a problem!

The flutter slider which you are using is in itself a renderBox which detects gesture all over it's given area (it uses a GestureArena), the only thing you have to do is too increase the tap area is that you give the widget more area, one of the easiest way to do that is that wrap the slider in a container and give the container enough height and width!

return Container(
  height: 100,
  child: Slider(
    value: _value.toDouble(),
    min: 1,
    max: 10,
    divisions: 10,
    label: _value.toString(),
    onChanged: (double newValue) {
      setState(() {
          _value = newValue.round();
        },
      );
    },
  ),
);

In this example the container height is 100 thus the tap area in this case will be 50 above the slider and 50 below, the slider will be exactly in the middle.

Hope it helps!

score 3 · Accepted Answer · answered Aug 16 '17 at 17:49

3

You don't want to wrap your Slider in a Container with a height. The Slider has a _kReactionRadius that expands the touch zone for a user. This means that a user doesn’t have to touch directly onto the Slider’s horizontal line to trigger the onTap():

return Center(
  child: new Slider(
    min: 0.0,
    max: 1.0,
    activeColor: Colors.grey[50],
    value: _getUnitProgress(model),
    onChanged: (double value) => _unitSeek(value, model),
  ),
);

answered Aug 16 '17 at 17:49

Mary

18,347
23
59
76

4

Is there a way to restrict the touch zone to the thumbs only? – eskalera Aug 07 '19 at 17:45
it still doesnt affect the touch zone, for example spotify has a very tiny slider but its hitbox is very big. – cs guy Jun 05 '21 at 18:34
This answer is not correct anymore. A slider in Flutter 3.10 has no kReactionRadius property anymore. – Harmen May 11 '23 at 13:07

score 3 · Answer 3 · answered Apr 30 '20 at 15:52

The easy way is to get the actual SliderTheme used in your context and modify only the properties you need. For example, to modify one slide:

SliderTheme(
    data: SliderTheme.of(context).copyWith(
    activeTrackColor: Colors.white,
    thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
    overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0),
    ),
    child: Slider(
             value: height.toDouble(),
             min: 120.0,
             max: 220.0,
             activeColor: Colors.white,
             inactiveColor: Color(0xFF8D8E98),
             onChanged: (double newValue) {
                 setState(() {
                        height = newValue.round();
                      });
                    },
                  ),
                ),

Another option is modify the theme you're using in your app; in this way you modify all the sliders in the app:

MaterialApp(
      theme: ThemeData.dark().copyWith(
          sliderTheme: SliderTheme.of(context).copyWith( //slider modifications
            thumbColor: Color(0xFFEB1555),
            inactiveTrackColor: Color(0xFF8D8E98),
            activeTrackColor: Colors.white,
            overlayColor: Color(0x99EB1555),
            thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
            overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0),
          ),
          primaryColor: Color(0xFF0A0E21), // theme color
          scaffoldBackgroundColor: Color(0xFF0A0E21)), // theme background color
      home: InputPage(),
);

This is the correct answer as of flutter 3.10 in 2023. Thanks! — Harmen, May 11 '23 at 13:06

How can I increase the "touch zone" of my Flutter slider widget?

3 Answers3