In this Android blog you will see the complete implementation of MultiSlider

MultiSlider

MultiSlider is multifunctional and multi-thumb custom view component for Android. It Can be used as a normal Android seekbar, a range bar and multi-thumb bar. MultiSlider is extremely easy to use while still very flexible and customizable.

Developer can customize many features from XML layout or programmatically.

Download

<dependency>
  <groupId>io.apptik.widget</groupId>
  <artifactId>multislider</artifactId>
  <version>1.3</version>
</dependency>

or Gradle:

    implementation 'io.apptik.widget:multislider:1.3'

Using snapshots

in build.gradle:

    configurations.all {
        resolutionStrategy.cacheChangingModulesFor 0, 'seconds'
    }

    repositories {
        maven { url "https://oss.sonatype.org/content/repositories/snapshots" }
    }

in app.gradle:

    dependencies {
        api ('io.apptik.widget:multislider:1.3.1-SNAPSHOT') { changing = true }
    }

Customizable Features

• View Dimensions
• Number of thumbs, from 0 to any. Default is 2
• Thumb offset. default is half the thumb width
• Track drawable
• Global Range drawable
• Separate Range drawables for each thumb
• Global Thumb drawable (supporting selector drawable)
• Separate Thumbs drawables (via XML thumb 1 and 2 can be specified, via code all)
• Global Min and Max scale limits
• Specific Min and Max limits for each thumb
• Values for thumbs (via XML thumb 1 and 2 can be specified, via code all)
• Scale step
• Option to draw thumbs apart, in order to be easier to select thumbs with the same or similar value
• Option to keep thumbs apart a specific number of steps in order not to allow thumbs to have same or similar values

Usage

in layout xml file add

    <io.apptik.widget.MultiSlider
        android:id="@+id/range_slider5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        app:thumbNumber="2"
        app:stepsThumbsApart="5"
        app:drawThumbsApart="true"

        />

in the activity/fragment code add

    MultiSlider multiSlider5 = (MultiSlider)v.findViewById(R.id.range_slider5);

    multiSlider5.setOnThumbValueChangeListener(new MultiSlider.OnThumbValueChangeListener() {
        @Override
        public void onValueChanged(MultiSlider multiSlider,
                                   MultiSlider.Thumb thumb,
                                   int thumbIndex,
                                   int value)
        {
            if (thumbIndex == 0) {
                doSmth(String.valueOf(value));
            } else {
                doSmthElse(String.valueOf(value));
            }
        }
    });

To use the default Material theme, edit res/values/styles.xml, res/values-v21/styles.xml:

    <style name="AppTheme" parent="...">
        <item name="multiSliderStyle">@style/Widget.MultiSlider</item>
    </style>

    <style name="Widget.MultiSlider" parent="android:Widget">
    </style>

To use the Holo theme, edit res/values/styles.xml, res/values-v21/styles.xml:

    <style name="AppTheme" parent="...">
        <item name="multiSliderStyle">@style/sliderHoloStyle</item>
    </style>

and add the holo theme to your project dependencies, example for gradle:

    implementation 'io.apptik.widget:multislider-holo:1.3'

Testing

MultiSlider comes with ready testing support for both Espresso and UiAutomator

Espresso

in build.gradle:

    androidTestImplementation 'io.apptik.widget:multislider-espresso:1.3'

in test code:

    for (int i = 0; i < 90; i++) {
        onView(ViewMatchers.withId(R.id.multiSlider3))
                .perform(moveThumbForward(0));
    }
    onView(ViewMatchers.withId(R.id.multiSlider3))
            .perform(setThumbValue(0, 50));
    for (int i = 0; i < 15; i++) {
        onView(ViewMatchers.withId(R.id.multiSlider3))
                .perform(moveThumbBackward(0));
    }

UiAutomator

in build.gradle:

    androidTestImplementation 'io.apptik.widget:mslider-uiautomator:1.3'

in test code:

    UiMultiSlider slider = new UiMultiSlider(new UiCollection(new UiSelector()
            .className(MultiSlider.class)
            .resourceIdMatches(".*multiSlider3.*"))
            .getChild(new UiSelector().textStartsWith("thumb 0:")));

    for (int i = 0; i < 15; i++) {
        slider.moveThumbForward();
    }
    slider.setThumbValue(10);
    for (int i = 0; i < 10; i++) {
        slider.moveThumbBackward();
    }