Seekbar where I can change both min max value with 2 thumbs

Question

I want to have a thumb for both min and max for my seekbar. You should be able to drag both thumbs independently.

Chevrotain

Answer 1

Just use the RangeSlider in Material Components and the method setValues()

    <com.google.android.material.slider.RangeSlider
        android:id="@+id/slider"            
        android:valueFrom="0"
        android:valueTo="10"
        ../>

with:

RangeSlider slider = findViewById(R.id.slider);
slider.setValues(1.0f,5.0f);

You can also use:

    <com.google.android.material.slider.RangeSlider
        android:id="@+id/slider"            
        android:valueFrom="0"
        android:valueTo="10"
        app:values="@array/initial_slider_values"
        ../>

with res/values/arrays.xml:

<resources>
  <array name="initial_slider_values">
    <item>1.0</item>
    <item>5.0</item>
  </array>
</resources>

Note: This requires a minimum of version 1.2.0-beta01

Bethel

1.2.0-beta01 of what? – Ingrowth

@Ingrowth Material Components library 1.2.0 – Bethel

It is possible without set android:valueTo="10" in xml ? – Godoy

@TusharLathiya There is default value of 1.0f if you don't specify it – Bethel

@TusharLathiya Just use slider.valueTo = 30f. You can use values greater than 1.0f programmatically – Bethel

@TusharLathiya It is just an example. Use the value you need. – Bethel

Answer 2

The normal seekbar in android can't have two thumbs that can be changed.

Instead use Slider from the Material Compoments Library. https://material.io/components/sliders/#

Dependencies we need to include is:

implementation 'com.google.android.material:material:1.2.0-alpha05'

Example layout to test this slider

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

  <com.google.android.material.slider.Slider
      android:id="@+id/slider"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:value="12.34"
      android:valueFrom="0.0"
      android:valueTo="50.0" />

  <com.google.android.material.slider.Slider
    android:id="@+id/rangeSlider"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:valueFrom="0.0"
    android:valueTo="100.0" />
</LinearLayout>

In your activity set up the range slider with two thumbs:

Slider rangeSlider = findViewById(R.id.rangeSlider);
rangeSlider.setValues(0.0F, rangeSlider.getMaximumValue());

In your styles.xml change from AppCompat to MaterialComponents, like this:

From: parent="Theme.AppCompat.Light.DarkActionBar">
To:   parent="Theme.MaterialComponents.Light.DarkActionBar">

Now we have a slider with two thumbs!

Chevrotain