# Slider
[Sliders](https://material.io/components/sliders/) allow users to make
selections from a range of values.
**Contents**
* [Using sliders](#using-sliders)
* [Continuous slider](#continuous-slider)
* [Discrete slider](#discrete-slider)
* [Theming sliders](#theming-sliders)
## Using sliders
Before you can use Material sliders, you need to add a dependency to the
Material Components for Android library. For more information, go to the
[Getting started](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md)
page.
### Usage
A `Slider` can be added in a layout like so:
```xml
```
Changes to a slider can be observed like so:
```kt
slider.addOnSliderTouchListener(object : Slider.OnSliderTouchListener {
override fun onStartTrackingTouch(slider: Slider) {
// Responds to when slider's touch event is being started
}
override fun onStopTrackingTouch(slider: Slider) {
// Responds to when slider's touch event is being stopped
}
})
slider.addOnChangeListener { slider, value, fromUser ->
// Responds to when slider's value is changed
}
```
Similarly, a `RangeSlider` can be added in a layout like so:
```xml
```
And in `values/arrays.xml`:
```xml
- 20.0
- 70.0
```
Changes to a range slider can be observed like so:
```kt
rangeSlider.addOnSliderTouchListener(object : RangeSlider.OnSliderTouchListener {
override fun onStartTrackingTouch(slider: RangeSlider) {
// Responds to when slider's touch event is being started
}
override fun onStopTrackingTouch(slider: RangeSlider) {
// Responds to when slider's touch event is being stopped
}
})
rangeSlider.addOnChangeListener { rangeSlider, value, fromUser ->
// Responds to when slider's value is changed
}
```
### Making sliders accessible
Sliders support setting content descriptors for use with screen readers. While
optional, we strongly encourage their use.
That can be done in XML via the `android:contentDescription` attribute or
programmatically like so:
```kt
slider.contentDescription = contentDescription
```
Additionaly, if using a `TextView` to display the value of the slider, you
should set `android:labelFor` on it, so that screen readers announce that
`TextView` refers to the slider.
### Adding/removing the value label
By default, the slider will show a value label above the thumb when it's
selected. You can change how it's drawn via the `app:labelBehavior` attribute or
`setLabelBehavior` method.
The modes of `app:labelBehavior` are:
* `floating` (default) - draws the label floating above the bounds of this
view
* `withinBounds` - draws the label floating within the bounds of this view
* `gone` - prevents the label from being drawn
### Setting a `LabelFormatter`
By using a `LabelFormatter` you can display the selected value using letters to
indicate magnitude (e.g.: 1.5K, 3M, 12B). That can be achieved through the
`setLabelFormatter` method.
The following example shows a slider for a prince range in the USD currency.
In code:
```kt
rangeSlider.setLabelFormatter { value: Float ->
val format = NumberFormat.getCurrencyInstance()
format.maximumFractionDigits = 0
format.currency = Currency.getInstance("USD")
format.format(value.toDouble())
}
```
### Types
There are two types of sliders: 1\. [Continuous slider](#continuous-slider), 2\.
[Discrete slider](#discrete-slider)
A slider with two thumbs is called a range slider.
## Continuous slider
Continuous sliders allow users to make meaningful selections that don’t require
a specific value.
API and source code:
* `Slider`
* [Class definition](https://developer.android.com/reference/com/google/android/material/slider/Slider)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/Slider.java)
The following example shows a continuous slider.
In the layout:
```xml
```
### Continuous range slider
API and source code:
* `RangeSlider`
* [Class definition](https://developer.android.com/reference/com/google/android/material/slider/RangeSlider)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/RangeSlider.java)
The following example shows a continuous range slider.
In the layout:
```xml
```
## Discrete slider
Discrete sliders display a numeric value label upon pressing the thumb, which
allows a user to input an exact value.
API and source code:
* `Slider`
* [Class definition](https://developer.android.com/reference/com/google/android/material/slider/Slider)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/Slider.java)
The following example shows a discrete slider.
In the layout:
```xml
```
### Discrete range slider
API and source code:
* `RangeSlider`
* [Class definition](https://developer.android.com/reference/com/google/android/material/slider/RangeSlider)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/RangeSlider.java)
The following example shows a discrete range slider.
In the layout:
```xml
```
### Anatomy and key properties
A slider has a track, one or two thumbs, and optional value label. A discrete
slider also has tick marks.
1. Track
2. Thumb
3. Value label (optional)
4. Tick mark (discrete sliders)
#### Track attributes
Element | Attribute | Related method(s) | Default value
------------------------------------------- | ------------------------ | --------------------------------------------------------- | -------------
**Min value** | `android:valueFrom` | `setValueFrom`
`getValueFrom` | N/A
**Max value** | `android:valueTo` | `setValueTo`
`getValueTo` | N/A
**Step size (discrete)** | `android:stepSize` | `setStepSize`
`getStepSize` | N/A
**Initial selected value (Slider)** | `android:value` | `setValue`
`getValue` | N/A
**Initial selected values (RangeSlider)** | `app:values` | `setValues`
`getValues` | N/A
**Height** | `app:trackHeight` | `setTrackHeight`
`getTrackHeight` | `4dp`
**Color** | `app:trackColor` | `setTrackTintList`
`getTrackTintList` | `null`
**Color for track's active part** | `app:trackColorActive` | `setTrackActiveTintList`
`getTrackActiveTintList` | `?attr/colorPrimary`
**Color for track's inactive part** | `app:trackColorInactive` | `setTrackInactiveTintList`
`getTrackInactiveTintList` | `?attr/colorPrimary` at 24%
**Minimum separation for adjacent thumbs** | `app:minSeparation` | `setMinSeparation`
`getMinSeparation` | `0dp`
_**Note:** `app:trackColor` takes precedence over `app:trackColorActive` and
`app:trackColorInative`. It's a shorthand for setting both values to the same
thing._
#### Thumb attributes
Element | Attribute | Related method(s) | Default value
---------------- | ---------------------- | --------------------------------------------------------------------------------- | -------------
**Color** | `app:thumbColor` | `setThumbTintList`
`getThumbTintList` | `?attr/colorPrimary`
**Radius** | `app:thumbRadius` | `setThumbRadiusResource`
`setThumbRadius`
`getThumbRadius` | `10dp`
**Elevation** | `app:thumbElevation` | `setThumbElevationResource`
`setThumbElevation`
`getThumbElevation` | `1dp`
**Halo color** | `app:haloColor` | `setHaloTintList`
`getHaloTintList` | `?attr/colorPrimary` at 24%
**Halo radius** | `app:haloRadius` | `setHaloRadiusResource`
`setHaloRadius`
`getHaloRadius` | `24dp`
**Stroke color** | `app:thumbStrokeColor` | `setThumbStrokeColor`
`setThumbStrokeColorResource`
`getThumbStrokeColor` | `null`
**Stroke width** | `app:thumbStrokeWidth` | `setThumbStrokeWidth`
`setThumbStrokeWidthResource`
`getThumbStrokeWidth` | `0dp`
#### Value label attributes
Element | Attribute | Related method(s) | Default value
------------- | ------------------- | ------------------------------------------- | -------------
**Style** | `app:labelStyle` | N/A | `@style/Widget.MaterialComponents.Tooltip`
**Formatter** | N/A | `setLabelFormatter`
`hasLabelFormatter` | `null`
**Behavior** | `app:labelBehavior` | `setLabelBehavior`
`getLabelBehavior` | `floating`
_**Note:** The value label is a
[Tooltip](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/tooltip/TooltipDrawable.java)._
#### Tick mark attributes
Element | Attribute | Related method(s) | Default value
----------------------------------- | ----------------------- | ------------------------------------------------------- | -------------
**Color** | `app:tickColor` | `setTickTintList`
`getTickTintList` | `null`
**Color for track's active part** | `app:tickColorActive` | `setTickActiveTintList`
`getTickActiveTintList` | `?attr/colorOnPrimary` at 54%
**Color for track's inactive part** | `app:tickColorInactive` | `setTickInactiveTintList`
`getTickInactiveTintList` | `?attr/colorPrimary` at 54%
**Tick visible** | `app:tickVisible` | `setTickVisible`
`isTickVisible()` | `true`
_**Note:** `app:tickColor` takes precedence over `app:tickColorActive` and
`app:tickColorInative`. It's a shorthand for setting both values to the same
thing._
#### Styles
Element | Style
----------------- | ----------------------------------
**Default style** | `Widget.MaterialComponents.Slider`
Default style theme attribute: `?attr/sliderStyle`
See the full list of
[styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/res/values/styles.xml)
and
[attributes](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/res/values/attrs.xml).
## Theming sliders
Sliders support
[Material Theming](https://material.io/components/sliders#theming) and can be
customized in terms of color and typography.
### Slider theming example
API and source code:
* `Slider`
* [Class definition](https://developer.android.com/reference/com/google/android/material/slider/Slider)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/Slider.java)
* `RangeSlider`
* [Class definition](https://developer.android.com/reference/com/google/android/material/slider/RangeSlider)
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/RangeSlider.java)
The following example shows a range slider with Material Theming.
#### Implementing slider theming
Using theme attributes and styles in `res/values/styles.xml` (themes all sliders
and affects other components):
```xml
```
or using a default style theme attribute, styles and a theme overlay (themes all
sliders but does not affect other components):
```xml
```
or using the style in the layout (affects only this specific slider):
```xml
```