Available from v2.13.0
Slider
Slider is the default styling applied to UISlider components for consistent theming across the design system.
Platform availability: iOS 17.0+
When to use:
- Use Slider when users need to select a value from a continuous range, such as adjusting volume, brightness, or setting a transfer amount within bounds.
- Consider using TextInput when precise numeric input is required, or Switch for simple on/off toggles.
Features:
- Consistent track and thumb styling.
- Integration with design system colors and theming.
Import
import BackbaseDesignSystem
API reference
|
|
|
|
API reference
Slider styles
The design system applies default styling to UISlider components.
Properties
|
Property |
Type |
Description |
|---|---|---|
|
minimumValue |
Float |
The minimumValue of the slider range. |
|
maximumValue |
Float |
The maximumValue of the slider range. |
|
value |
Float |
The value currently selected on the slider. |
|
minimumTrackTintColor |
UIColor? |
The minimumTrackTintColor for the filled track portion. |
|
maximumTrackTintColor |
UIColor? |
The maximumTrackTintColor for the unfilled track portion. |
|
thumbTintColor |
UIColor? |
The thumbTintColor for the slider thumb. |
Configuration
|
Parameter |
Type |
Default |
|---|---|---|
|
style |
Style<UISlider> |
DesignSystem.shared.styles.defaultSlider |
style
The style parameter applies visual styling to the slider using a Style closure.
let customSliderStyle: Style<UISlider> = { slider in
slider.minimumTrackTintColor = Theme.colors.primary.default
slider.maximumTrackTintColor = Theme.colors.background.support
}
customSliderStyle(slider)
Usage
Basic usage
Apply the default slider style to a UISlider:
let slider = UISlider()
DesignSystem.shared.styles.defaultSlider(slider)
Programmatic configuration
Configure the slider with custom values:
let slider = UISlider()
DesignSystem.shared.styles.defaultSlider(slider)
slider.minimumValue = 0
slider.maximumValue = 100
slider.value = 50
Value change handling
Observe slider value changes:
let slider = UISlider()
DesignSystem.shared.styles.defaultSlider(slider)
slider.addTarget(self, action: #selector(sliderValueChanged(_:)), for: .valueChanged)
@objc func sliderValueChanged(_ slider: UISlider) {
print("Slider value: \(slider.value)")
}
States and variants
Interaction states
|
State |
Property |
Description |
|---|---|---|
|
Enabled |
isEnabled = true |
Default interactive state |
|
Disabled |
isEnabled = false |
Non-interactive state with dimmed appearance |
// Disable the slider
slider.isEnabled = false
Continuous vs discrete
|
Mode |
Property |
Description |
|---|---|---|
|
Continuous |
isContinuous = true |
Value updates during drag |
|
Discrete |
isContinuous = false |
Value updates on release only |
// Only send value updates when user releases
slider.isContinuous = false
Customization
Styling
|
Style |
Description |
|---|---|
|
DesignSystem.shared.styles.defaultSlider |
Default slider style. |
Custom styles
Create a custom slider style:
let customSliderStyle: Style<UISlider> = { slider in
slider.minimumTrackTintColor = Theme.colors.primary.default
slider.maximumTrackTintColor = Theme.colors.background.support
slider.thumbTintColor = Theme.colors.primary.default
}
customSliderStyle(slider)
Accessibility
The UISlider inherits accessibility features from UIKit and is accessible by default.
Accessibility configuration
|
Property |
Description |
Type |
|---|---|---|
|
accessibilityLabel |
Descriptive label for the slider |
String? |
|
accessibilityValue |
Current value description |
String? |
|
accessibilityTraits |
Includes .adjustable by default |
UIAccessibilityTraits |
Best practices
- Set a descriptive accessibilityLabel that explains what the slider controls
- Customize accessibilityValue to announce values in user-friendly formats
- The slider responds to VoiceOver swipe gestures to adjust values
let slider = UISlider()
slider.accessibilityLabel = "Volume control"
slider.accessibilityValue = "\(Int(slider.value)) percent"
Dependencies
- External dependencies: None
- Internal dependencies: None
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
This component uses semantic tokens only. See Semantic tokens below.
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Colors |
Theme.colors.foreground.brand |
Minimum track tint color |
|
Colors |
Theme.colors.background.support |
Maximum track tint color |
|
Styles |
DesignSystem.shared.styles.defaultSlider |
Default slider style |
See also
- Switch - Toggle control for on/off states