Skip to content

Commit

Permalink
[#638] Update sliders documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
paulinea committed Oct 13, 2023
1 parent 1b5ee1f commit 17bba32
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 31 deletions.
32 changes: 31 additions & 1 deletion docs/components/Sliders.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,19 @@ OdsSlider(
)
```

Parameter | Default value | Description
-- | -- | --
`value: Float` | | Current value of the slider. If outside of `valueRange` provided, value will be coerced to this range.
`onValueChange: (Float) -> Unit` | | Callback invoked on slider value change. `value` should be updated here.
`modifier: Modifier` | `Modifier` | `Modifier` applied to the slider
`enabled: Boolean` | `true` | Controls the enabled state of the slider. If `false`, the user cannot interact with it.
`valueRange: ClosedFloatingPointRange<Float>` | `0f..1f` | Range of values that the slider can take. Given `value` will be coerced to this range.
`steps: Int` | `0` | If greater than `0`, specifies the amounts of discrete values, evenly distributed between across the whole value range. If `0`, slider will behave as a continuous slider and allow to choose any value from the range specified. Must not be negative.
`onValueChangeFinished: (() -> Unit)?` | `null` | Callback invoked when value change has ended. This callback shouldn't be used to update the slider value (use `onValueChange` for that), but rather to know when the user has completed selecting a new value by ending a drag or a click.
`leftIcon: OdsSliderIcon?` | `null` | Icon displayed on the left of the slider
`rightIcon: OdsSliderIcon?` | `null` | Icon displayed on the right of the slider
{:.table}

### Continuous lockups slider

![Continuous lockups slider](images/slider_continuous_lockups_light.png) ![Continuous lockups slider dark](images/slider_continuous_lockups_light.png)
Expand Down Expand Up @@ -101,6 +114,19 @@ OdsSliderLockups(
)
```

Parameter | Default value | Description
-- | -- | --
`value: Float` | | Current value of the slider. If outside of `valueRange` provided, value will be coerced to this range.
`onValueChange: (Float) -> Unit` | | Callback invoked on slider value change. `value` should be updated here.
`modifier: Modifier` | `Modifier` | `Modifier` applied to the slider
`enabled: Boolean` | `true` | Controls the enabled state of the slider. If `false`, the user cannot interact with it.
`valueRange: ClosedFloatingPointRange<Float>` | `0f..1f` | Range of values that the slider can take. Given `value` will be coerced to this range.
`steps: Int` | `0` | If greater than `0`, specifies the amounts of discrete values, evenly distributed between across the whole value range. If `0`, slider will behave as a continuous slider and allow to choose any value from the range specified. Must not be negative.
`onValueChangeFinished: (() -> Unit)?` | `null` | Callback invoked when value change has ended. This callback shouldn't be used to update the slider value (use `onValueChange` for that), but rather to know when the user has completed selecting a new value by ending a drag or a click.
`leftIcon: OdsSliderIcon?` | `null` | Icon displayed on the left of the slider
`rightIcon: OdsSliderIcon?` | `null` | Icon displayed on the right of the slider
{:.table}

### Discrete slider

Discrete sliders display a numeric value label upon pressing the thumb, which
Expand All @@ -112,7 +138,7 @@ With icons:

![Discrete slider with icon](images/slider_discrete_with_icon_light.png) ![Discrete slider with icon dark](images/slider_discrete_with_icon_dark.png)

> **Jetpack Compose implementation**
#### Jetpack Compose implementation

In your composable screen you can use:

Expand Down Expand Up @@ -140,6 +166,8 @@ OdsSlider(
)
```

Use the same API as the [Continuous slider](#continuous-slider).

### Discrete lockups slider

![Discrete lockups slider](images/slider_discrete_lockups_light.png) ![Discrete lockups slider dark](images/slider_discrete_lockups_dark.png)
Expand Down Expand Up @@ -176,6 +204,8 @@ OdsSliderLockups(
)
```

Use the same API as the [Continuous lockups slider](#continuous-lockups-slider).

## Component specific tokens

_Soon available_
Original file line number Diff line number Diff line change
Expand Up @@ -62,21 +62,17 @@ private const val ActiveTickColorAlpha = 0.4f
* You can allow the user to choose only between predefined set of values by specifying the amount
* of steps between min and max values.
*
* @param value current value of the Slider. If outside of [valueRange] provided, value will be
* coerced to this range.
* @param onValueChange lambda in which value should be updated
* @param modifier modifiers for the OdsSlider layout
* @param enabled whether or not component is enabled and can be interacted with or not
* @param valueRange range of values that Slider value can take. Passed [value] will be coerced to
* this range
* @param steps if greater than 0, specifies the amounts of discrete values, evenly distributed
* between across the whole value range. If 0, slider will behave as a continuous slider and allow
* to choose any value from the range specified. Must not be negative.
* @param onValueChangeFinished lambda to be invoked when value change has ended. This callback
* shouldn't be used to update the slider value (use [onValueChange] for that), but rather to
* know when the user has completed selecting a new value by ending a drag or a click.
* @param leftIcon Icon displayed on the left of the slider
* @param rightIcon Icon displayed on the right of the slider
* @param value Current value of the slider. If outside of `valueRange` provided, value will be coerced to this range.
* @param onValueChange Callback invoked on slider value change. `value` should be updated here.
* @param modifier [Modifier] applied to the slider
* @param enabled Controls the enabled state of the slider. If `false`, the user cannot interact with it.
* @param valueRange Range of values that the slider can take. Given [value] will be coerced to this range.
* @param steps If greater than `0`, specifies the amounts of discrete values, evenly distributed between across the whole value range. If `0`, slider will
* behave as a continuous slider and allow to choose any value from the range specified. Must not be negative.
* @param onValueChangeFinished Callback invoked when value change has ended. This callback shouldn't be used to update
* the slider value (use [onValueChange] for that), but rather to know when the user has completed selecting a new value by ending a drag or a click.
* @param leftIcon [OdsSliderIcon] displayed on the left of the slider
* @param rightIcon [OdsSliderIcon] displayed on the right of the slider
*/
@Composable
@OdsComposable
Expand Down Expand Up @@ -129,21 +125,17 @@ fun OdsSlider(
* You can allow the user to choose only between predefined set of values by specifying the amount
* of steps between min and max values.
*
* @param value current value of the Slider. If outside of [valueRange] provided, value will be
* coerced to this range.
* @param onValueChange lambda in which value should be updated
* @param modifier modifiers for the OdsSlider layout
* @param enabled whether or not component is enabled and can be interacted with or not
* @param valueRange range of values that Slider value can take. Passed [value] will be coerced to
* this range
* @param steps if greater than 0, specifies the amounts of discrete values, evenly distributed
* between across the whole value range. If 0, slider will behave as a continuous slider and allow
* to choose any value from the range specified. Must not be negative.
* @param onValueChangeFinished lambda to be invoked when value change has ended. This callback
* shouldn't be used to update the slider value (use [onValueChange] for that), but rather to
* know when the user has completed selecting a new value by ending a drag or a click.
* @param leftIcon Icon displayed on the left of the slider
* @param rightIcon Icon displayed on the right of the slider
* @param value Current value of the slider. If outside of `valueRange` provided, value will be coerced to this range.
* @param onValueChange Callback invoked on slider value change. `value` should be updated here.
* @param modifier [Modifier] applied to the slider
* @param enabled Controls the enabled state of the slider. If `false`, the user cannot interact with it.
* @param valueRange Range of values that the slider can take. Given [value] will be coerced to this range.
* @param steps If greater than `0`, specifies the amounts of discrete values, evenly distributed between across the whole value range. If `0`, slider will
* behave as a continuous slider and allow to choose any value from the range specified. Must not be negative.
* @param onValueChangeFinished Callback invoked when value change has ended. This callback shouldn't be used to update
* the slider value (use [onValueChange] for that), but rather to know when the user has completed selecting a new value by ending a drag or a click.
* @param leftIcon [OdsSliderIcon] displayed on the left of the slider
* @param rightIcon [OdsSliderIcon] displayed on the right of the slider
*/
@Composable
@OdsComposable
Expand Down

0 comments on commit 17bba32

Please sign in to comment.