Slider

Default

Day	Night

Installation

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

Usage

Example of a BpkSlider:

                                                
                                                import net.skyscanner.backpack.compose.slider.BpkSlider
                                                
                                                BpkSlider(
                                                  value = 0.5f,
                                                  onValueChange = { newValue -> } // Handle update
                                                )

Example of a BpkRangeSlider:

                                                
                                                import net.skyscanner.backpack.compose.slider.BpkSlider
                                                
                                                BpkRangeSlider(
                                                  value = 0.2f..0.8f,
                                                  onValueChange = { newValue -> } // Handle update
                                                )

Example of a BpkRangeSlider with Label displayed when thumb is dragged:

                                                
                                                import net.skyscanner.backpack.compose.slider.BpkSlider
                                                
                                                var rangeSliderValue by remember { mutableStateOf(0.2f..0.8f) }
                                                BpkRangeSlider(
                                                    value = rangeSliderValue,
                                                    lowerThumbLabel = stringResource(id = R.string.gbp_formatter, rangeSliderValue.start),
                                                    upperThumbLabel = stringResource(id = R.string.gbp_formatter, rangeSliderValue.endInclusive),
                                                    onValueChange = { newValue -> } // Handle update
                                                )