Flexible Step Range Slider With Kotlin

Overview

What is FlexibleStepRangeSlider

  • We use RangeSlider in Material Components for range filter as below
  • But it has fixed step size so we have to render even if input values are dynamic gap.
  • FlexibleStepRangeSlider has flexible step based on RangeSlider with Material Component





Demo

Sample Filter





Setup

Gradle

Maven Central

dependencies {
    implementation 'kr.co.prnd:flexiblestep-rangeslider:x.x.x'
}





How to use

XML

">
<kr.co.prnd.slider.FlexibleStepRangeSlider
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingHorizontal="20dp"
    android:paddingVertical="20dp"
    android:valueFrom="float" 
    android:valueTo="float"
    app:thumbColorActive="color"
    app:thumbColorInactive="color"
    app:thumbElevationActive="dimension"
    app:thumbElevationInactive="dimension"
    app:thumbRadiusActive="dimension"
    app:thumbRadiusInactive="dimension"
    app:thumbStrokeColorActive="color"
    app:thumbStrokeColorInactive="color"
    app:thumbStrokeWidthActive="dimension"
    app:thumbStrokeWidthInactive="dimension"
    app:tickColorActive="color"
    app:tickColorInactive="color"
    app:tickVisible="boolean"
    app:trackColorActive="color"
    app:trackColorInactive="color"
    app:trackHeight="dimension"
    app:values="floatArray" />

Function

  • setters to change attributes
  • valueFrom, valueTo property is currently actual value on slider
  • setValues(): initate range slider. (optional) ValueFrom valueTo parameters indicate start position.
  • OnValueChangeListener notify registered lisetner when value changed.
// smooth slider
slider.setValues(
    values = listOf(0f, 100f), 
    valueFrom = initailValueFrom, 
    valueTo = initialValueTo
)
// flexible slider
slider.setValues(
    valuse = listOf(0f, 10f, 20f, 30f, 50f, 100f, 150f, 200f),
    valueFrom = initialValueFrom,
    valueTo = initialValueTo
)

slider.valueFrom // actual value from range
slider.valueTo // actual value from range

slider.addOnValueChangeListener { from, to state -> 
    when (state) {
        // Called when dragging to thumb
        ValueChangeState.Dragging -> updateValue(from, to)
        // Called when update values or take off thumb
        ValueChangeState.Idle -> {
            updateValue(from, to)
            fetchValueChange(from, to)
        }
    }
}





License

Copyright 2021 PRNDcompany

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You might also like...
Circular Slider UI Control for Android
Circular Slider UI Control for Android

Circular Slider What is this? Circular Slider is a custom-built Android View used for choosing numbers. It works similarly to the regular slider contr

Custom & highly configurable seek slider with sliding intervals, disabled state and every possible setting to tackle!
Custom & highly configurable seek slider with sliding intervals, disabled state and every possible setting to tackle!

LabeledSeekSlider Custom & highly configurable seek slider with sliding intervals, disabled state and every possible setting to tackle! Minimum target

A custom clock view with a circular slider.
A custom clock view with a circular slider.

Read this in other languages: English, 中文. ClockSlider A custom clock view with a circular slider. Supported Android Versions Android 4.0 Jelly Bean(A

Automatic Slider with jetPack Compose
Automatic Slider with jetPack Compose

Automatic Slider with jetPack Compose

TabSlider - An expanding slider widget which displays selected value
TabSlider - An expanding slider widget which displays selected value

TabSlider - An expanding slider widget which displays selected value

A date time range picker for android written in Kotlin
A date time range picker for android written in Kotlin

DateTimeRangePicker A date time range picker for android Usage Firstly, grab latest release of the library via JitPack. And note that, it utilizes Jod

 A beautiful and powerful SeekBar what supports single、 range、steps、vetical、custom( 一款美观强大的支持单向、双向范围选择、分步、垂直、高度自定义的SeekBar)
 A beautiful and powerful SeekBar what supports single、 range、steps、vetical、custom( 一款美观强大的支持单向、双向范围选择、分步、垂直、高度自定义的SeekBar)

文档还是中文好 Demo APK download fir.im Usage Dependencies Release Version allprojects { repositories { ... maven { url 'https://jitpack.io' }

Android widget for selecting a range of values.
Android widget for selecting a range of values.

MaterialRangeBar MaterialRangeBar is a fork from https://github.com/edmodo/range-bar that adds some basic material styling, as well as start and end v

A material Date Range Picker based on wdullaers MaterialDateTimePicker
A material Date Range Picker based on wdullaers MaterialDateTimePicker

Material Date and Time Picker with Range Selection Credits to the original amazing material date picker library by wdullaer - https://github.com/wdull

A beautiful material calendar with endless scroll, range selection and a lot more!
A beautiful material calendar with endless scroll, range selection and a lot more!

CrunchyCalendar A light, powerful and easy to use Calendar Widget with a number out of the box features: Infinite vertical scrolling in both direction

Android widget for selecting a range of values.
Android widget for selecting a range of values.

MaterialRangeBar MaterialRangeBar is a fork from https://github.com/edmodo/range-bar that adds some basic material styling, as well as start and end v

Android widget for selecting a range of values.
Android widget for selecting a range of values.

RangeBar The RangeBar is similar to an enhanced SeekBar widget, though it doesn't make use of the SeekBar. It provides for the selection of a range of

A material Date Range Picker based on wdullaers MaterialDateTimePicker
A material Date Range Picker based on wdullaers MaterialDateTimePicker

Material Date and Time Picker with Range Selection Credits to the original amazing material date picker library by wdullaer - https://github.com/wdull

Android time range picker

TimeRangePicker TimeRangePicker is a library which can be used to select a time range. WARNING Requires android-support-v4 Description This library pr

A smart colored time selector. Users can select just free time with a handy colorful range selector.
A smart colored time selector. Users can select just free time with a handy colorful range selector.

Colored Time Range Selector A smart colored time range selector. Users can select just free time with a handy colorful range selector. Screen Shots Fe

A material Date Range Picker based on wdullaers MaterialDateTimePicker
A material Date Range Picker based on wdullaers MaterialDateTimePicker

Material Date and Time Picker with Range Selection Credits to the original amazing material date picker library by wdullaer - https://github.com/wdull

A beautiful Android custom View that works similar to a range or seekbar. With animations.
A beautiful Android custom View that works similar to a range or seekbar. With animations.

ValueBar A beautiful Android custom View that works similar to a range or seekbar. Selection by gesture. With animations. Supporting API level 11+. De

Utilizes the Range HTTP header to download a file with multiple connections in parallel, bypassing cheap bandwidth throttling

async-range-downloader Utilizes the Range HTTP header to download a file with multiple connections in parallel, bypassing cheap bandwidth throttling T

A customizable, easy-to-use, and functional circular time range picker library for Android
A customizable, easy-to-use, and functional circular time range picker library for Android

A customizable, easy-to-use, and functional circular time range picker library for Android. Use this library to mimic Apple's iOS or Samsung's bedtime picker.

Releases(1.0.0)
Owner
PRND
내차팔땐 헤이딜러, PRND
PRND
Dagger Hilt Tutorial - Step by Step Guide

Dagger Hilt Tutorial - Step by Step Guide This repository contains a sample app that implements Dagger-Hilt in MVVM architecture using Kotlin. The app

null 3 Nov 26, 2021
Slider-Gallery-Zoom: image slider for android supporting indicator and auto scroll with clicking on image

image slider supporting indicator and auto scroll with clicking on image to open full screen image slider swipe and pinch zoom gestures like gallery,just pass your images and the position of the current image.

Mahmoud Elian 3 May 28, 2022
Android library for adding price range with chart like in airbnb with flexible customization. Made by Stfalcon

Stfalcon-PriceRangeBar Demo Application Who we are Need iOS and Android apps, MVP development or prototyping? Contact us via [email protected]. We dev

Stfalcon LLC 223 Nov 25, 2022
Android library. Flexible components for chat UI implementation with flexible possibilities for styling, customizing and data management. Made by Stfalcon

ChatKit for Android ChatKit is a library designed to simplify the development of UI for such a trivial task as chat. It has flexible possibilities for

Stfalcon LLC 3.6k Jan 5, 2023
A simple animated step view for Android

StepView A simple animated step view for Android. Backward and forward animations is supported. Usage Add jcenter() to repositories block in your grad

Bogdan Kornev 833 Dec 30, 2022
Step indicator with titles/labels and tons of customizations.

PageStepIndicator was built from existing StepIndicator library developed by Layerlre . I needed a page indicator that can display title and at the sa

OGx09 27 Apr 17, 2022
An amazing and convenient Android image slider.

Android Image Slider ![Gitter](https://badges.gitter.im/Join Chat.svg) This is an amazing image slider for the Android platform. I decided to open sou

代码家 5.6k Jan 7, 2023
🎨 A color picker for Android. Pick a color using color wheel and slider (HSV & alpha).

ColorPicker English | 中文 A ColorPicker for Android. Pick a color using color wheel and slider (HSV & alpha). Gradle dependencies { implementation

Hong Duan 313 Dec 14, 2022
Android library that allows applications to add dialog-based slider widgets to their settings

Android Slider Preference Library Overview Slider represents a float between 0.0 and 1.0 Access with SliderPreference.getValue() or SharedPreferences.

Jay Petacat 135 Nov 29, 2022
This is an Image slider with swipes, Here we used Volley to Image load URL's from JSON! Here we make it very easy way to load images from Internet and We customized the description font style(OpenSans).

ImageSliderWithSwipes This is an Image slider with swipes, Here we used Volley to load URL's from JSON! Here we make it very easy way to load images f

Prabhakar Thota 44 May 31, 2021