How to make Range seekbar or dual thumbs seekbar in android

Updated 1 June 2018


In this blog,
I have shown how to make dual thumbs Seekbar or we can say a Range SeekBar in android. But first of all, I will  give the small introduction about the simple Seekbar in android.

Meet with SeekBar

SeekBar is useful user interface element which is used commonly in android applications. A SeekBar is an extension of ProgressBar that allows the selection of numerical values using a natural user thumbs. Basically, SeekBar has a thumb that you can slide to choose a value between 0 and some maximum that you set.

You can touch the thumb and drag left or right to set the current progress or use the arrow keys.

A common usage of Seekbar is our device brightness control and volume control.

How to implement

In this example, I have created a simple Seekbar

and In onCreate method

Progress Level 5

On Progress


Now we have been known that how to make simple Seekbar.

But if we want to make dual thumbs means a Range Seekbar then what android doesn’t give the range Seekbar and if we want to customize Seekbar then we have to write huge lines of code.

Seekbar with dual Thumbs

So, I have shown you how to make the RangedSeekbar by using yahoo/android-range-seek-bar.

Actually, RangedSeekbar is a simple SeekBar similar to the default Android one, but with two thumb controls allowing a range to be selected.

Step 1: Add the dependency in app level build.gradle file

Step 2: Make the RangedSeekbar

In XML file,

and in your attrs.xml file

or if you want to make it programmatically then

for float

Step 3: Add the listener and get the min and max value

Some snapshots while using RangeSeekbar in android

Screenshot_20160303-165000             Screenshot_20160303-165038



How to disable thumbs while dragging in RangedSeekBar

In below block of code, I have shown how to disable thumbs while dragging if the difference b/w minValue and maxValue is 40 or below 40.



Get the Complete Source Code

For getting the complete project go to this link.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


  • rajesh
    I am using range seek bar in my app it works fine but how to set the range between the thumbs?this is my S.O question please see this
    • Aman Gupta
      tell the range value b/w your thumbs in your RangeSeekBar. Which is set in this method.
      seekBar.setRangeValues(0, 100);

      or please share your java class file, where you have used the RangeSeekBar.

      • rajesh
        Thanks Aman. Problem is resolved.
    • Aman Gupta
      Thanks for sharing your code. And I have edit our blog and please read this section “How to disable thumbs while dragging in RangedSeekBar” for your problem.
  • Parth Vora
    How to increase the line height in the range bar….?
  • Vinoth
    how to replace the thumb?
  • Kartik Setia
    How to add third thumb ? you have any solution for that ?
    • Aman Gupta
      What is need of third thumb in ranged seekbar?
      We have not any solution yet. But we will reply you soon if we will get any solution for that.
  • Aman Gupta
    This library doesn’t provide this functionality. You can use the material-range-bar for implementing this.

    This is link:

  • Aman Gupta
    You can use the crystal-range-seekbar. This is the github link:
  • Vishal
    can you tell how to change the color of of min and max text view and notify text..? please.
    • Aman Gupta
      You can use either crystal-range-seekbar or material-range-bar both give the your required functionality.
      Links are,
  • Kalin Maldjanski
    for more customizations as some asked for (colors, sizes, drawables,
    multiple thumbs) you can check out also
    • Aman Gupta
      Thanks @kalinmaldjanski:disqus for your advice. We really appreciate it.
  • Geeky
    How to set the step size or incrementBy () as in normal seekbar function
  • Caleb Ameh
    Hi..Please I’m trying to create a range seekbar for a project that can select just 5 seconds within any point in the full range of a video. Haven’t had luck with modifying the code given above
  • Abhi Harsole
    hi. how to change the color of selected range text of above both thumbs ? it is in white color bydefault
    • aastha gupta
      @abhiharsole:disqus It can’t be modified. I will suggest you to use instead.
  • Soumya Ranjan Jena
    how to use it in fargment
    i tired it but i got undefine error at


  • Kiran Jnr
    how to change background color and thumb color of seekbar.
  • Shubham
    Best Solution for range seekbar. Thank you so much 🙂
    • Aman Gupta (Moderator)
      Your always welcome Bro. 🙂
  • Sayyad Khan
    Hi, I do not want notify text how can hide this.
  • Start a Project

      Message Sent!

      If you have more details or questions, you can reply to the received confirmation email.

      Back to Home