FioriSlider

public struct FioriSlider

extension FioriSlider: View

extension FioriSlider: _ViewEmptyChecking

The FioriSlider is a SwiftUI component that provides both a standard slider and a range slider. The standard slider allows users to select a single value, while the range slider allows users to select a range of values with two thumbs.

Usage

Standard Slider:

A standard slider consists of a title, a bound value, and a “thumb” (an image that users can drag along a linear “track”. The track represents a continuum between two extremes: a minimum and a maximum value. By default, the formatted minimum value is displayed at the leading end of the slider, and the formatted maximum value is displayed at the trailing end of the slider.

The title is displayed at the top left of the component, while the bound value is displayed at the top right. As users move the thumb, the slider continuously updates its bound value to reflect the thumb’s position.

The following example illustrates a standard slider bound to the value speed. The slider uses the default range of 0 to 100, with a default step of 1. The minimum value of the range is displayed as the leading accessory view label, while the maximum value is shown as the trailing accessory view label. As the slider updates the speed value, the updated value is displayed in a label at the top right of the slider.

 @State private var speed: Double = 20

 FioriSlider(
     title: "Speed Limit",
     value: $speed,
     description: "Simple standard slider"
 )

You can also use the range parameter to specify the value range of the slider. The step parameter allows you to define incremental steps along the slider’s path. The decimalPlaces parameter can be used to manage the decimal places of the slider’s value. To format the bound value for display, use the valueFormat parameter. The leadingValueFormat parameter customizes the leading value label, which displays the minimum value of the range. Similarly, the trailingValueFormat parameter customizes the trailing value label, which displays the maximum value of the range. Additionally, you can use the showsValueLabel, showsLeadingAccessory, and showsTrailingAccessory parameters to control the display of the related labels. The onValueChange closure passed to the slider provides callbacks when the user drags the slider.

 @State private var speed: Double = 20

 FioriSlider(
     title: "Speed Limit",
     value: $speed,
     range: 10...200,
     step: 2.5,
     decimalPlaces: 1,
     description: "Simple standard slider",
     valueLabelFormat: "%.1f KM",
     leadingLabelFormat: "%.1f KM",
     trailingLabelFormat: "%.1f KM",
     onValueChange: { isEditing, newSpeed in
        if !isEditing {
            print("The speed was changed to: " + String(format: "%.1f", value))
        }
     }
 )

The example above illustrates a standard slider with a range of 10 to 200 and a step increment of 2.5. Therefore, the slider’s increments would be 10, 12.5, 15, and so on. At the same time, the minimum value of the range is formatted and displayed as 10.0 KM. Similarly, the maximum value of the range is formatted and displayed as 200.0 KM. The updated value can be received within the onValueChange closure callback when the user drags the slider.

The slider also uses the step to increase or decrease the value when a VoiceOver user adjusts the slider with voice commands.

The FioriSlider supports a modifier called accessibilityAdjustments, which allows you to adjust the accessibility settings for a standard slider according to the Fiori Slider guidelines.

Range Slider:

A range slider consists of a title, a bound lower value, a bound upper value, and two “thumbs” (images that users can drag along a linear “track”). The track represents a continuum between two extremes: a minimum and a maximum value. By default, the formatted lower value is displayed in a text field at the leading end of the slider, and the formatted upper value is displayed in a text field at the trailing end of the slider. The title is displayed at the top left of the component. As users edit the lower or upper value in the text fields or move the thumbs, the slider continuously updates the bound values to reflect the thumbs’ positions.

A single editable range slider is also supported. In this case, only the formatted upper value is displayed in a text field at the trailing end of the slider.

The following example illustrates an editable range slider bound to the lower value lowerValue and the upper value upperValue. The range slider uses the default range of 0 to 100, with a default step of 1. By default, the lower value is displayed in a text field as the leading accessory view, while the upper value is shown in a text field as the trailing accessory view. Both the lower thumb and upper thumb are clearly displayed on the slider track. You can edit these values in the text fields to change the lower and upper values. Alternatively, you can drag the lower thumb to adjust the lower value and drag the upper thumb to change the upper value. The range slider does not display the value label at the top right of the slider by default.

 @State private var lowerValue: Double = 20
 @State private var upperValue: Double = 40

 FioriSlider(
     title: "Editable Range Slider",
     lowerValue: $lowerValue,
     upperValue: $upperValue,
     description: "Simple editable range slider"
 )

The following example illustrates a single editable range slider bound to the upper value upperValue. The range slider uses the default range of 0 to 100, with a default step of 1. By default, only the upper value is shown in a text field as the trailing accessory view and one thumb displayed on the slider track. You can edit value in the text fields to change the upper values or drag the thumb to adjust the upper value. The single range slider does not display the value label at the top right of the slider by default.

 @State private var upperValue: Double = 40

 FioriSlider(
     title: "Single Editable Range Slider",
     upperValue: $upperValue,
     description: "Simple Single Editable range slider"
 )

Similar with standard slider, the range slider also allow you use the range parameter to specify the value range of the slider. The step parameter allows you to define incremental steps along the slider’s path. The decimalPlaces parameter can be used to manage the decimal places of the slider’s value. By default, the range slider does not display the value label. However, you can specify what you want to display in the valueLabel parameter to show the value label at the top right of the slider. The showsLeadingAccessory and showsTrailingAccessory parameters control the display of the leading accessory view and trailing accessory view, respectively. By default, the editable range slider uses a text field as the leading or trailing accessory view. However, you can specify your own view in the leadingAccessory or trailingAccessory parameters to override the default text field. The showsLeadingAccessory and showsTrailingAccessory parameters can be used to control the display of the respective accessory views. The onRangeValueChange closure passed to the slider provides callbacks when the user drags the slider. The onValueChange closure passed to the single editable slider provides callbacks when the user drags the slider.

 @State private var lowerValue: Double = 20
 @State private var upperValue: Double = 40

 FioriSlider(
     title: "Editable Range Slider",
     lowerValue: $lowerValue,
     upperValue: $upperValue,
     range: 10...200,
     step: 2.5,
     decimalPlaces: 1,
     description: "Simple editable range slider",
     onRangeValueChange: { isEditing, lowerValue, upperValue in
        if !isEditing {
            print("Range Slider value was: " + String(format: "%.1f", lowerValue) + " - " + String(format: "%.1f", upperValue))
        }
     }
 )

The slider also uses the step to increase or decrease the value when a VoiceOver user adjusts the slider with voice commands.


                      
                      
                      init(title:valueLabel:lowerThumb:upperThumb:activeTrack:inactiveTrack:lowerValue:upperValue:range:step:decimalPlaces:thumbHalfWidth:showsLowerThumb:showsUpperThumb:onRangeValueChange:icon:description:leadingAccessory:trailingAccessory:isRangeSlider:valueFormat:rangeFormat:leadingValueFormat:trailingValueFormat:showsValueLabel:showsLeadingAccessory:showsTrailingAccessory:onValueChange:onEditFieldFocusStatusChange:componentIdentifier:)

Undocumented

Declaration

Swift

public init(@ViewBuilder title: () -> any View,
            @ViewBuilder valueLabel: () -> any View = { EmptyView() },
            @ViewBuilder lowerThumb: () -> any View,
            @ViewBuilder upperThumb: () -> any View,
            @ViewBuilder activeTrack: () -> any View,
            @ViewBuilder inactiveTrack: () -> any View,
            lowerValue: Binding<Double>,
            upperValue: Binding<Double>,
            range: ClosedRange<Double> = 0 ... 100,
            step: Double = 1,
            decimalPlaces: Int = 0,
            thumbHalfWidth: CGFloat = 14,
            showsLowerThumb: Bool = true,
            showsUpperThumb: Bool = true,
            onRangeValueChange: ((Bool, Double, Double) -> Void)? = nil,
            @ViewBuilder icon: () -> any View = { EmptyView() },
            @ViewBuilder description: () -> any View = { EmptyView() },
            @ViewBuilder leadingAccessory: () -> any View = { EmptyView() },
            @ViewBuilder trailingAccessory: () -> any View = { EmptyView() },
            isRangeSlider: Bool = true,
            valueFormat: String? = nil,
            rangeFormat: (String, String)? = nil,
            leadingValueFormat: String? = nil,
            trailingValueFormat: String? = nil,
            showsValueLabel: Bool = true,
            showsLeadingAccessory: Bool = true,
            showsTrailingAccessory: Bool = true,
            onValueChange: ((Bool, Double) -> Void)? = nil,
            onEditFieldFocusStatusChange: ((Bool) -> Void)? = nil,
            componentIdentifier: String? = FioriSlider.identifier)


                      
                      
                      init(title:titleView:value:range:step:decimalPlaces:icon:description:valueLabel:valueLabelView:showsValueLabel:valueFormat:leadingAccessory:showsLeadingAccessory:leadingValueFormat:trailingAccessory:showsTrailingAccessory:trailingValueFormat:onValueChange:wrapperBuiltInSlider:thumb:activeTrack:inactiveTrack:thumbHalfWidth:)

Create a standard slider

A standard slider consists of a title, a selected value, and a “thumb” (an image that the user can drag along a linear “track”). The track represents a continuum between two bounded values: a minimum and a maximum value. By default, the formatted minimum value is displayed at the leading side of the slider, and the formatted maximum value is displayed at the trailing side of the slider.

The title is displayed at the top left of the component, while the bound value is displayed at the top right. As the user moves the thumb, the slider continuously updates its selected value corresponding to the thumb’s position. You also can customize the slider with customized value label, leading accessory view and trailing accessory view.

Declaration

Swift

init(title: AttributedString = "",
     @ViewBuilder titleView: () -> any View = { EmptyView() },
     value: Binding<Double>,
     range: ClosedRange<Double> = 0 ... 100,
     step: Double = 1,
     decimalPlaces: Int = 0,
     icon: Image? = nil,
     description: AttributedString? = nil,
     valueLabel: AttributedString? = nil,
     @ViewBuilder valueLabelView: () -> any View = { EmptyView() },
     showsValueLabel: Bool = true,
     valueFormat: String? = nil,
     @ViewBuilder leadingAccessory: () -> any View = { EmptyView() },
     showsLeadingAccessory: Bool = true,
     leadingValueFormat: String? = nil,
     @ViewBuilder trailingAccessory: () -> any View = { EmptyView() },
     showsTrailingAccessory: Bool = true,
     trailingValueFormat: String? = nil,
     onValueChange: ((Bool, Double) -> Void)? = nil,
     wrapperBuiltInSlider: Bool = false,
     thumb: any Shape = Circle(),
     activeTrack: any Shape = Capsule(),
     inactiveTrack: any Shape = Capsule(),
     thumbHalfWidth: CGFloat = 14)

Parameters

`title`	The main textual title for the slider has a higher priority than `titleView` and will be displayed if it is a non-empty string. The default value is an empty string.
`titleView`	A SwiftUI `View` that serves as an alternative title. It will be used only if `title` is an empty string.
`value`	The slider which allows the user to select a single value within a specified range (`range`).
`range`	The range of the slider values. The default is `0...100`
`step`	incremental/decremental value when the thumb changes its position. The default is `1`.
`decimalPlaces`	This property specifies the number of digits that should appear after the decimal point in the Double value for slider value. It controls the precision of the numerical representation by determining how many decimal places are displayed or used in calculations, rounding the Double accordingly. The default is `0`.
`icon`	The icon image for hint text of the slider
`description`	The hint text of the slider
`valueLabel`	The optional string to override the default slider value label for the standard slider.
`valueLabelView`	A SwiftUI `View` that serves as an alternative value label for the slider. This parameter will be used only if `valueLabel` is `nil`.
`showsValueLabel`	Indicates whether the value label is to be displayed or not. The default value is `true`
`valueFormat`	This optional format is used to format the displayed slider value in the value label view. It is also utilized for formatting the accessibility value, if provided.
`leadingAccessory`	The customized view to override the default leading accessory view which is a text label to display the minimum value of the range
`showsLeadingAccessory`	Indicates whether the leading accessory view is to be displayed or not. The default value is `true`
`leadingValueFormat`	This optional format is used to format the displayed minimal value of standard slider’s range in the leading accessory view, if provided.
`trailingAccessory`	The customized view to override the default trailing accessory view which is a text label to display the maximum value of the range
`showsTrailingAccessory`	Indicates whether the trailing accessory view is to be displayed or not. The default value is `true`
`trailingValueFormat`	This optional format is used to format the displayed maximal value of standard slider’s range in the trailing accessory view, if provided.
`onValueChange`	An optional callback function is triggered when the user begins to drag the thumb along the standard slider’s track to adjust its value. The first boolean property indicates whether the editing process has begun or ended, with `false` signifying that the editing has concluded. The second double property represents the newly adjusted slider value.
`thumb`	the shape for thumb of the standard Slider. By default, it is circle.
`activeTrack`	the shape for active track of the standard Slider. By default, it is capsule.
`inactiveTrack`	the shape for inactive track of the standard Slider. By default, it is capsule.
`thumbHalfWidth`	the half width of the thumb of the standard slider. In the context of a circular representation of the thumb, this value is used as the radius. It should be less than 22. The default value is `14`.


                      
                      
                      init(title:titleView:lowerValue:upperValue:range:step:decimalPlaces:icon:description:valueLabel:valueLabelView:rangeFormat:leadingAccessory:showsLeadingAccessory:leadingValueFormat:trailingAccessory:showsTrailingAccessory:trailingValueFormat:onRangeValueChange:lowerThumb:upperThumb:activeTrack:inactiveTrack:thumbHalfWidth:onEditFieldFocusStatusChange:)

Create a range slider

Declaration

Swift

init(title: AttributedString = "",
     @ViewBuilder titleView: () -> any View = { EmptyView() },
     lowerValue: Binding<Double>,
     upperValue: Binding<Double>,
     range: ClosedRange<Double> = 0 ... 100,
     step: Double = 1,
     decimalPlaces: Int = 0,
     icon: Image? = nil,
     description: AttributedString? = nil,
     valueLabel: AttributedString? = nil,
     @ViewBuilder valueLabelView: () -> any View = { EmptyView() },
     rangeFormat: (String, String)? = nil,
     @ViewBuilder leadingAccessory: () -> any View = { EmptyView() },
     showsLeadingAccessory: Bool = true,
     leadingValueFormat: String? = nil,
     @ViewBuilder trailingAccessory: () -> any View = { EmptyView() },
     showsTrailingAccessory: Bool = true,
     trailingValueFormat: String? = nil,
     onRangeValueChange: ((Bool, Double, Double) -> Void)? = nil,
     lowerThumb: any Shape = Circle(),
     upperThumb: any Shape = Circle(),
     activeTrack: any Shape = Capsule(),
     inactiveTrack: any Shape = Capsule(),
     thumbHalfWidth: CGFloat = 14,
     onEditFieldFocusStatusChange: ((Bool) -> Void)? = nil)

Parameters

`title`	The main textual title for the slider has a higher priority than `titleView` and will be displayed if it is a non-empty string. The default value is an empty string.
`titleView`	A SwiftUI `View` that serves as an alternative title. It will be used only if `title` is an empty string.
`upperValue`	The upper value of range slider.
`range`	The range of the slider values. The default is `0...100`
`step`	incremental/decremental value when the thumb changes its position. The default is `1`.
`decimalPlaces`	This property specifies the number of digits that should appear after the decimal point in the Double value for slider value. It controls the precision of the numerical representation by determining how many decimal places are displayed or used in calculations, rounding the Double accordingly. The default is `0`.
`icon`	The icon image for hint text of the slider
`description`	The hint text of the slider
`valueLabel`	The optional customized string for value label which display at the top right of the slider
`valueLabelView`	A SwiftUI `View` that serves as an alternative value label for the slider. This parameter will be used only if `valueLabel` is `nil`.
`rangeFormat`	The optional formats are used to format the lower and upper bound values of the range. They are utilized for formatting the accessibility values when you customize the range slider with your own leading and trailing accessory views, if provided.
`leadingAccessory`	The customized view to override the default leading accessory view which is a text field to display the lower value
`showsLeadingAccessory`	Indicates whether the leading accessory view is to be displayed or not. The default value is `true`
`leadingValueFormat`	This optional format is used to format the displayed lower value of range slider in the leading accessory view, if provided.
`trailingAccessory`	The customized view to override the default trailing accessory view which is a text field to display the upper value
`showsTrailingAccessory`	Indicates whether the trailing accessory view is to be displayed or not. The default value is `true`
`trailingValueFormat`	This optional format is used to format the displayed upper value of range slider in the leading accessory view, if provided.
`onRangeValueChange`	An optional callback function that is triggered when the user begins to drag either the lower or upper thumb along the range slider’s track to adjust the slider’s values. The first boolean parameter indicates whether the editing has begun or ended, with `false` signifying that the editing has ended. The second parameter is a double that represents the updated lower value, while the third parameter (also a double) represents the updated upper value.
`lowerThumb`	the shape for lower thumb of the range Slider. By default, it is circle.
`upperThumb`	the shape for upper thumb of the range Slider. By default, it is circle.
`activeTrack`	the shape for active track of the range Slider. By default, it is capsule.
`inactiveTrack`	the shape for inactive track of the range Slider. By default, it is capsule.
`thumbHalfWidth`	the half width of the thumb of the range slider. In the context of a circular representation of the thumb, this value is used as the radius. It should be less than 22. The default value is `14`.
`onEditFieldFocusStatusChange`	An optional callback function is triggered when the focus state of a text field, which serves as a leading or trailing accessory for an editable slider, changes. The boolean parameter of the callback indicates the focus state of the text field. This can be useful for obtaining the focus state when customizing the editable slider.


                      
                      
                      init(title:titleView:upperValue:range:step:decimalPlaces:icon:description:valueLabel:valueLabelView:rangeFormat:onValueChange:upperThumb:activeTrack:inactiveTrack:thumbHalfWidth:onEditFieldFocusStatusChange:)

Create a single editable range slider

A range slider consists of a title, a bound upper value, and a “thumb” (images that users can drag along a linear “track”). The track represents a continuum between two extremes: a minimum and a maximum value. By default, the formatted upper value is displayed in a text field at the trailing end of the slider. The title is displayed at the top left of the component. As users edit the upper value in the text fields or move the thumb, the slider continuously updates the bound values to reflect the thumbs’ positions.

Declaration

Swift

init(title: AttributedString = "",
     @ViewBuilder titleView: () -> any View = { EmptyView() },
     upperValue: Binding<Double>,
     range: ClosedRange<Double> = 0 ... 100,
     step: Double = 1,
     decimalPlaces: Int = 0,
     icon: Image? = nil,
     description: AttributedString? = nil,
     valueLabel: AttributedString? = nil,
     @ViewBuilder valueLabelView: () -> any View = { EmptyView() },
     rangeFormat: (String, String)? = nil,
     onValueChange: ((Bool, Double) -> Void)? = nil,
     upperThumb: any Shape = Circle(),
     activeTrack: any Shape = Capsule(),
     inactiveTrack: any Shape = Capsule(),
     thumbHalfWidth: CGFloat = 14,
     onEditFieldFocusStatusChange: ((Bool) -> Void)? = nil)

Parameters

`title`	The main textual title for the slider has a higher priority than `titleView` and will be displayed if it is a non-empty string. The default value is an empty string.
`titleView`	A SwiftUI `View` that serves as an alternative title. It will be used only if `title` is an empty string.
`upperValue`	The value of single editable slider.
`range`	The range of the slider values. The default is `0...100`
`step`	incremental/decremental value when the thumb changes its position. The default is `1`.
`decimalPlaces`	This property specifies the number of digits that should appear after the decimal point in the Double value for slider value. It controls the precision of the numerical representation by determining how many decimal places are displayed or used in calculations, rounding the Double accordingly. The default is `0`.
`icon`	The icon image for hint text of the slider
`description`	The hint text of the slider
`valueLabel`	The optional customized value for value label which display at the top right of the slider
`valueLabelView`	A SwiftUI `View` that serves as an alternative value label for the slider. This parameter will be used only if `valueLabel` is `nil`.
`rangeFormat`	The optional formats are used to format the lower and upper bound values of the range. They are utilized for formatting the accessibility values when you customize the range slider with your own leading and trailing accessory views, if provided.
`upperThumb`	the shape for upper thumb of the range Slider. By default, it is circle.
`activeTrack`	the shape for active track of the range Slider. By default, it is capsule.
`inactiveTrack`	the shape for inactive track of the range Slider. By default, it is capsule.
`thumbHalfWidth`	the half width of the thumb of the range slider. In the context of a circular representation of the thumb, this value is used as the radius. It should be less than 22. The default value is `14`.
`onEditFieldFocusStatusChange`	An optional callback function is triggered when the focus state of a text field, which serves as trailing accessory for an editable slider, changes. The boolean parameter of the callback indicates the focus state of the text field. This can be useful for obtaining the focus state when customizing the editable slider.


                      
                      
                      accessibilityAdjustments(title:value:leadingLabel:trailingLabel:description:)

Adjust the accessibility label and value for the standard slider. By default, the standard slider uses SwiftUI’s default accessibility behavior to combine all subviews. However, this function allows you to adjust the accessibility label and value for the standard slider.

The values of the parameters title, leadingLabel, trailingLabel, and description are formatted as ‘This is a %@ slider whose maximum value is %@ and minimum value is %@, %@’ for the accessibility label. The value of the parameter value is formatted as ‘Current value is %@’ for the accessibility value.

Declaration

Swift

func accessibilityAdjustments(title: String, value: String? = nil, leadingLabel: String? = nil, trailingLabel: String? = nil, description: String? = nil) -> some View

Parameters

`title`	The string used to display the title of the slider.
`value`	An optional formatted value as the accessibility value. The default formatted slider value is used when it was nil.
`leadingLabel`	An optional formatted string as the accessibility label of leading accessory view. The default formatted minimum value of range is used when it is nil.
`trailingLabel`	An optional formatted string as the accessibility label of trailing accessory view. The default formatted maximum value of range is used when it is nil.
`description`	An optional formatted string which append to the accessibility label

identifier
Undocumented
Declaration
Swift

static let identifier: String


                      
                      
                      init(title:valueLabel:lowerThumb:upperThumb:activeTrack:inactiveTrack:lowerValue:upperValue:range:step:decimalPlaces:thumbHalfWidth:showsLowerThumb:showsUpperThumb:onRangeValueChange:icon:description:leadingAccessory:trailingAccessory:isRangeSlider:valueFormat:rangeFormat:leadingValueFormat:trailingValueFormat:showsValueLabel:showsLeadingAccessory:showsTrailingAccessory:onValueChange:onEditFieldFocusStatusChange:)

Undocumented

Declaration

Swift

init(title: AttributedString,
     valueLabel: AttributedString? = nil,
     lowerThumb: any Shape = Circle(),
     upperThumb: any Shape = Circle(),
     activeTrack: any Shape = Capsule(),
     inactiveTrack: any Shape = Capsule(),
     lowerValue: Binding<Double>,
     upperValue: Binding<Double>,
     range: ClosedRange<Double> = 0 ... 100,
     step: Double = 1,
     decimalPlaces: Int = 0,
     thumbHalfWidth: CGFloat = 14,
     showsLowerThumb: Bool = true,
     showsUpperThumb: Bool = true,
     onRangeValueChange: ((Bool, Double, Double) -> Void)? = nil,
     icon: Image? = nil,
     description: AttributedString? = nil,
     @ViewBuilder leadingAccessory: () -> any View = { EmptyView() },
     @ViewBuilder trailingAccessory: () -> any View = { EmptyView() },
     isRangeSlider: Bool = true,
     valueFormat: String? = nil,
     rangeFormat: (String, String)? = nil,
     leadingValueFormat: String? = nil,
     trailingValueFormat: String? = nil,
     showsValueLabel: Bool = true,
     showsLeadingAccessory: Bool = true,
     showsTrailingAccessory: Bool = true,
     onValueChange: ((Bool, Double) -> Void)? = nil,
     onEditFieldFocusStatusChange: ((Bool) -> Void)? = nil)


                      
                      
                      init(_:)

Undocumented

Declaration

Swift

init(_ configuration: FioriSliderConfiguration)

body
Declaration
Swift

public var body: some View { get }
isEmpty
Undocumented
Declaration
Swift

public var isEmpty: Bool { get }