Slider

All

Day	Night

Installation

Backpack Android is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

The Slider component can be used in both XML and Kotlin

Example of a slider in XML

                                                
                                                <net.skyscanner.backpack.slider.BpkSlider
                                                  android:layout_width="wrap_content"
                                                  android:layout_height="wrap_content"
                                                  android:valueTo="10"
                                                  android:valueFrom="0"
                                                  android:value="5"
                                                  android:stepSize="1" />

Example of a slider in Kotlin

                                                
                                                import net.skyscanner.backpack.slider.BpkSlider
                                                
                                                BpkSlider(context).apply {
                                                   valueFrom = 0f
                                                   valueTo = 10f
                                                   value = 5f
                                                   stepSize = 1f
                                                }

Example of a range slider in XML

                                                
                                                <net.skyscanner.backpack.slider.BpkSlider
                                                  android:layout_width="wrap_content"
                                                  android:layout_height="wrap_content"
                                                  android:valueTo="100"
                                                  android:valueFrom="0"
                                                  app:values="@array/initial_slider_values"
                                                  android:stepSize="5" />

                                                
                                                <resources>
                                                  <array name="initial_slider_values">
                                                    <item>25</item>
                                                    <item>75</item>
                                                  </array>
                                                </resources>

Example of a range slider in Kotlin

                                                
                                                import net.skyscanner.backpack.slider.BpkSlider
                                                
                                                BpkSlider(context).apply {
                                                   valueFrom = 0f
                                                   valueTo = 100f
                                                   setValues(25f, 75f)
                                                   stepSize = 5f
                                                }

Example of a slider with formatted label in Kotlin

                                                
                                                import net.skyscanner.backpack.slider.BpkSlider
                                                import java.text.NumberFormat
                                                import java.util.*
                                                
                                                BpkSlider(context).apply {
                                                   valueFrom = 1000f
                                                   valueTo = 5000f
                                                   value = 3000f
                                                   stepSize = 10f
                                                   setLabelFormatter { value: Float ->
                                                     val format = NumberFormat.getCurrencyInstance()
                                                     format.maximumFractionDigits = 0
                                                     format.currency = Currency.getInstance("GBP")
                                                     format.format(value.toDouble())
                                                   }
                                                }