Thumb and Thumb Overlay in Flutter Range Slider (SfRangeSlider)

18 Nov 201824 minutes to read

This section explains how to customize the thumb and thumb overlay in the Flutter Range Slider.

  • Thumb - It is one of the elements of Flutter Range Slider which can be used to drag and change the selected values of the Range Slider.
  • Thumb overlay - It is rendered around the thumb while interacting with it.

NOTE

You must import the theme.dart library from the Core package to use SfRangeSliderTheme. This applies to all the code examples in this section except the Thumb icon section, which uses properties exposed directly on SfRangeSlider.

Thumb size

You can change the size of the thumb in the Flutter Range Slider using the thumbRadius property.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        thumbRadius: 13,
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Thumb size support

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        thumbRadius: 13,
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Thumb size support

Thumb color

You can change the color of the thumb in the range slider using the thumbColor property.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        thumbColor: Colors.red,
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Thumb color support

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        thumbColor: Colors.red,
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Thumb color support

Thumb stroke width and stroke color

You can change the thumb stroke width using the thumbStrokeWidth property and thumb stroke color using the thumbStrokeColor property.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        thumbStrokeWidth: 3,
        thumbStrokeColor: Colors.red,
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Thumb stroke color support

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        thumbStrokeWidth: 3,
        thumbStrokeColor: Colors.red,
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Thumb stroke color support

Thumb icon

You can show the custom widgets like icon or text inside the thumbs using the startThumbIcon and the endThumbIcon properties.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(5.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        thumbColor: Colors.white,
        thumbRadius: 15,
        thumbStrokeWidth: 2,
        thumbStrokeColor: Colors.blue,
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        values: _values,
        startThumbIcon: const Icon(
            Icons.arrow_back_ios, color: Colors.blue, size: 20.0),
        endThumbIcon: const Icon(
            Icons.arrow_forward_ios, color: Colors.blue, size: 20.0),
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Thumb icon support

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(5.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        thumbColor: Colors.white,
        thumbRadius: 15,
        thumbStrokeWidth: 2,
        thumbStrokeColor: Colors.blue,
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        values: _values,
        startThumbIcon: const Icon(
            Icons.keyboard_arrow_down_outlined, color: Colors.blue, size: 20.0),
        endThumbIcon: const Icon(
            Icons.keyboard_arrow_up_outlined, color: Colors.blue, size: 20.0),
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Thumb icon support

Thumb overlay size

You can change the size of the thumb overlay in the Flutter Range Slider using the overlayRadius property.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        overlayRadius: 22,
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Thumb overlay size support

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        overlayRadius: 22,
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Thumb overlay size support

Thumb overlay color

You can change the color of the thumb overlay in the range slider using the overlayColor property.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        overlayColor: Colors.red[50],
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Thumb overlay color support

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        overlayColor: Colors.red[50],
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Thumb overlay color support

Thumb overlap stroke color

You can change the overlap stroke color of the thumb in the Flutter Range Slider using the overlappingThumbStrokeColor property.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        overlappingThumbStrokeColor: Colors.red,
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Thumb overlap stroke color support

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        overlappingThumbStrokeColor: Colors.red,
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Thumb overlap stroke color support